Button Row

Overview

We can use a button row elements in places where we need to add more than one button side by side in the same row. Every button in a button row can be styled individually.

Click me Call to Action Click me

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

A button can be added anywhere on the site where you can type text using the button shortcode. Example: The below shortcode can be used to add buttons to your slider caption.

[av_buttonrow alignment='left' button_spacing='5' button_spacing_unit='px' av_uid='av-jo6idxj2' custom_class='' admin_preview_bg='']
[av_buttonrow_item label='Click me' link='manually,http://' link_target='' size='small' label_display='' icon_select='yes' icon='4' font='entypo-fontello' color='custom' custom_bg='#0099e5' custom_font='#ffffff' av_uid='av-1fbifpm' icon_hover='']
[av_buttonrow_item label='Call to Action' link='manually,http://' link_target='' size='small' label_display='' icon_select='yes' icon='5' font='entypo-fontello' color='custom' custom_bg='#ff4c4c' custom_font='#ffffff' av_uid='av-10367ka' icon_hover='']
[av_buttonrow_item label='Click me' link='manually,http://' link_target='' size='small' label_display='' icon_select='yes' icon='6' font='entypo-fontello' color='custom' custom_bg='#34bf49' custom_font='#ffffff' av_uid='av-v9i2ei' icon_hover='']
[/av_buttonrow]

Customization

Enable custom CSS class name support from Enfold theme options > Layout Builder and add a custom class name called “my-custom-button-row” to the button row element.

Button fonts

Font size: Font size for the button elements can be changed site-wide from Enfold Options > Advanced Styling > Misc > Buttons > Font size. 

Font color: To change the button font color, double-click the button row element and open the button options for each button and switch to the Color tab > Custom color

Font family:  The buttons inherit the default body font family set in the theme options general styling.

Using CSS we can change all of the default styles.



/* Button font style */

.my-custom-button-row a.avia-button .avia_iconbox_title {
     font-size:30px;
     color: gold;
     font-family: 'Cookie', Helvetica, sans-serif;
}

If you wish to change the font size of the button elements on the mobile device please use the below CSS



/* Font size on desktop */

#top .my-custom-button-row a.avia-button .avia_iconbox_title {
     font-size:40px;
}

/* Font size on mobile */
@media only screen and (max-width: 767px) {
	#top .my-custom-button-row a.avia-button .avia_iconbox_title {
    	font-size:14px;
    }	
}

The below CSS can be used to change the font style on hover.



/* Button font style on hover */

.my-custom-button-row a.avia-button:hover .avia_iconbox_title {
     color: gold;
}

Button Border

Add a custom border style to the full-width button element


/* Button border */
#top .my-custom-button-row .avia-button {
   border: 12px solid #9a8080 !important;
}

.my-custom-button-row .avia-button .avia_button_background,
.my-custom-button-row .avia-button:hover .avia_button_background {
	border: none !important;
	border-radius: 0;
}

To change the border style on hover please copy the below code to your site and adjust the color and width values to suit your design.

NOTE: As the border on hover takes a few extra pixels a transparent color border is used to avoid the buttons from moving on hover.



/* Bordder on hover */

#top .my-custom-button-row .avia-button {
   border: 12px solid transparent;
}

#top .my-custom-button-row .avia-button:hover {
   border: 12px solid gold !important;
}

.my-custom-button-row .avia-button .avia_button_background,
.my-custom-button-row .avia-button:hover .avia_button_background {
	border: none !important;
	border-radius: 0;
}

Button Icon

Button icon color is inherited from the button font color. The button font color can be set in the button options > color tab > custom color. To change the icon color separately please use the below CSS



/* Button Icon color */

.my-custom-button-row a.avia-button .avia_button_icon {
	color:gold;
}

Button icon size is inherited from the button font size. To change the icon size please sue the below CSS



/* Button icon size */


.my-custom-button-row a.avia-button .avia_button_icon {
	font-size: 40px!important; /* Button icon size */
	line-height: 40px; /* Vertical align icon*/
	color:gold;
}

The icon can be displayed before or after the button text. Double click the button element to open the button options and select the Button Icon to be displayed to the left or right.

To change the button icon style on hover please use the below CSS




/* Button Icon on hover */

.my-custom-button-row a.avia-button:hover .avia_button_icon {
	color:gold;
}

Button Background

To change the background color, double-click on the button element and open button element options then select Colors tab. Here you can choose one of the pre-defined color or add a custom color from the “Custom Color”.

To change the background color using CSS please use the below CSS



/* Button background */


.my-custom-button-row .avia-button {
	background: lightblue !important;
}

Add gradient button background



/* Gradient button background */


.my-custom-button-row .avia-button {
	background: #67B26F;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #4ca2cd, #67B26F);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #4ca2cd, #67B26F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

To set a background image to the button use the below CSS code and edit the image path.



/* Button background */


.my-custom-button-row .avia-button {
	background: url('image.jpg');
}

You can choose to display the transparent background button with a light or dark border from the button element options > color tab.

To change the opacity of the button background please use the below CSS



/* Button opacity */

.my-custom-button-row .avia-button {
   background: rgba(13,23,56, .45)	!important;
}

We can change the background color on mouse hover by using the below code.



/* Background on hover */
.my-custom-button-row a.avia-button:hover .avia_iconbox_title,
.my-custom-button-row .avia-button:hover {
	color: #000 !important;
	background: gold !important;
}

Button Shape

To change the shape of the default button to a pill shape, increase the border-radius from Enfold Options > Advanced Styling > Misc > Buttons >Border radius

To do it the CSS way and target specific buttons, please add the below code to your site:



/* Pill shape buttons */
.my-custom-button-row .avia-button {
   border-radius: 50px;
}

To remove the rounded edges of the buttons please add the below CSS to your site.



/* Remove round edges  */


.my-custom-button-row .avia-button {
   border-radius: 0px;
}

Button alignment

By default, the buttons in a row can be aligned to the left, center or right from the button row options.