Fullwidth Button

Overview

As the name say’s the Fullwidth Button element takes up the entire width of the parent container. It functions same as the button element with an extra option to add the custom text description. The fullwidth button element can be customized from the button options available when you double-click the button element in the advanced layout builder. Below is an example of the fullwidth button element.

Hi I’m a full width button 🙂

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_button_big label='Hi I’m a full width button :) ' description_pos='below' link='manually,javascript:;' link_target='' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#ffffff' color='green' custom_bg='#444444' color_hover='black' custom_bg_hover='#444444' custom_class='' admin_preview_bg='' av_uid='av-n4yt1m'][/av_button_big]

Customization

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

Button fonts

Button title

Font size: Font size for the button element can be changed using the below CSS.

Font color: To change the button font color, double-click the button element and open the button options 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.



/* Title */

.my-custom-fullwidth-button 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-fullwidth-button a.avia-button .avia_iconbox_title {
     font-size:40px;
}

/* Font size on mobile */
@media only screen and (max-width: 767px) {
	#top .my-custom-fullwidth-button 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-fullwidth-button:hover a.avia-button .avia_iconbox_title {
     color: gold;
}

Button description

Font size, color and family for the description font can be changed using CSS we can change all of the default styles.



/* Description */

.my-custom-fullwidth-button a.avia-button .av-button-description p {
     font-size:13px;
     color: gold;
}

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



/* Font size on desktop */

.my-custom-fullwidth-button a.avia-button .av-button-description p {
     font-size:30px;
}


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

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



/* Font style on hover */

.my-custom-fullwidth-button a.avia-button:hover .av-button-description p {
     font-size:30px;
}

Button Border

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


/* Fullwidth button border */
#top .my-custom-fullwidth-button .avia-button-fullwidth {
   border: 12px solid red;
}

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

Change the border style on hover



/* Bordder on hover */

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

.my-custom-fullwidth-button .avia-button-fullwidth .avia_button_background,
.my-custom-fullwidth-button .avia-button-fullwidth: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-fullwidth-button 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-fullwidth-button 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-fullwidth-button 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-fullwidth-button .avia-button-fullwidth {
	background: lightblue !important;
}

Add gradient button background



/* Gradient button background */


.my-custom-fullwidth-button .avia-button-fullwidth {
	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-fullwidth-button .avia-button-fullwidth {
	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-fullwidth-button .avia-button-fullwidth {
   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-fullwidth-button .avia-button-fullwidth:hover .avia_button_background {
	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-fullwidth-button .avia-button-fullwidth {
   border-radius: 50px;
}

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



/* Remove round edges  */


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

Button size and alignment

By default, the fullwidth buttons take the entire width of the parent container it is placed in.

The easiest way to control the button width is to place it inside the column whose width suits your design.

If you wish to do the CSS way, please use the below code and do not forget to calculate the button padding which adds to the width of the buttons.



/* Button width */
#top .my-custom-fullwidth-button .avia-button-fullwidth .avia_button_background,
.my-custom-fullwidth-button .avia-button-fullwidth {
   max-width:200px;
   left: 50%;
   transform: translate(-50%);
}

NOTE: If you do not like to center align the custom width button please use the below code instead: User “float:left;” or “float:right;” to align the custom width button to left or right.



/* Button width */
#top .my-custom-fullwidth-button .avia-button-fullwidth .avia_button_background,
.my-custom-fullwidth-button .avia-button-fullwidth {
   max-width:200px;
   float: right;
}