PowerPack & WooPack Documentation

Dual Button

Dual Button module is a great way to create dual buttons  with good styling . It lessens the burden of coding to apply styles to the buttons.

Button 1 Tab

Use the  Button 1 tab  to set the properties of the first button amongst the two. You can set the text , link URL and link Target. Also, apply icon or image to the button if required. You can assign a hover transition to the button and set the transition speed. To enhance styling, apply a CSS class too.

button1

Button 2 Tab

The Button 2 Tab is used to set the settings for the second button in the same way as applied  to the first button .Here too you can apply a CSS class to improve styling.

button2Style Tab

The Button 1 section applies Background and Text Color to the first button and the next section to the second button.  Use the  General section to apply alignment, padding and border style to the button. You can also apply rounded corners to the button. One other important thing to be mentioned is that you can apply responsive layout to the dual button using Responsive breakpoint.

style1

style2

Typography Tab

Typography tab sets the font properties of the buttons. They are font style, size, line height and letter spacing.

typo

 

×