This is the third part of a DIVI center freebie buttons series. Today we are giving you buttons with icons and hover effects which you can see down bellow with including the demo bellow the following image:

buttons

 

You can see the demo with all effects on button bellow:

 

View demo

To use this buttons first download package with a json file and CSS necessary for this buttons to work. You will also need CSS from part 1 of this series because it containes main CSS settings for these buttons. If you have downloaded the previous package from part 1 of this series you will only need to add a json file and css from this download file. If not don’t worry we have included the files from part 1 and part 2 of this series in this file.

Download package

Now unzip this package somewhere on your machine and upload JSON file in your DIVI library. To do this go to your WP dashboard -> Divi -> Divi Library and on upper side click to button “Import & Export”. In Portability window click import and then chose json file from our package for import and click import.

import-buttons

After you have imported JSON file now open DC-buttons-part-3.css from a package and copy a whole code to your DIVI custom CSS field by going to WP dashboard -> Divi -> theme options -> custom CSS. In this field paste all CSS from file and save. If you haven’t already used the package from post part 1 & 2, you need to extract files from Divi Center buttons 1 & 2 zip that is included and copy CSS from there too. Also if you want to use buttons from DC buttons part 1 and 2 you will need to upload a JSON in Divi library from Divi Center buttons 1 zip and Divi Center Buttons 2 zip that is included on the download button above.

Using and customizing buttons:

1) Changing button size:

We have made 8 main classes for this buttons so you can change sizes easily without writing your own CSS. There are 4 classes related to size for buttons with icons on the right side and the left side. For the buttons with the icon on the left side you have:

  1. dc_icon_button_xl
  2. dc_icon_button_l
  3. dc_icon_button_m
  4. dc_icon_button_s

And for the icons on the right side you have these 4 classes:

  1. dc_icon_on_right_button_xl
  2. dc_icon_on_right_button_l
  3. dc_icon_on_right_button_m
  4. dc_icon_on_right_button_s

Make changes to your button by going to button module and open custom CSS tab where you will find few classes, you just need to change the last part (xl, l, m or s) of size class to change the button size like shown bellow:

changing-class

2) Changing button color:

 

When it comes to changing colors you will find the code on the beginning of the CSS file for this buttons where you need to change hex codes in order to change buttons styles:

.dc_icon_button{
 background: #fcad26; /* CHANGE HEX COLOR CODE HERE */ 
 color: #fff !important; /* CHANGE TEXT COLOR HERE */
 border-color:#fcad26; /* CHANGE BORDER COLOR HERE */ 
}
.dc_icon_button:hover {
 background: #f29e0d !important; /* CHANGE COLOR OF BACKGROUND ON HOVER */
}
.dc_icon_button:active {
 background: #f58500 !important; /* CHANGE BACKGROUND COLOR WHEN BUTTONS IS CLICKED */
 top: 2px;
}

You need to change hex color codes on the marked places in code above.

3) Loading and changing icons

Icons included in this buttons are loaded from Font Awesome, so if you haven’t integrated Font Awesome on your site they will not display icons. To integrate Font Awesome icons font please add this block of code to your functions.php:


/**
 * Include FontAwesome in DIVI
 */
function font_awesome_script() {
 wp_enqueue_script( 'font-awesome', 'https://use.fontawesome.com/9e7f437185.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'font_awesome_script' );

When you have your icons loaded, to change specific icon on specific button find the matching class of the button you need to modify. You can do that by looking at the custom CSS tab in custom class field where you will find that buttons have classes like .dc_icon_button_2, .dc_icon_button_3, .dc_icon_button_4 etc. If you for example want to change the icon of the .dc_icon_button_2, find that class in CSS we provided with pseudo :before attached. In that block of CSS you will find content part where you have Font Awesome unicode in this case “\f07a. In this case you need to modify that unicode. To find another icon and unicode from Font Awesome icon set go to their site here.


.dc_icon_button_2:before {
background: rgba(0,0,0,0.05) !important;
content: "\f07a" !Important; /* CHANGE UNICODE HERE */
right: 0 !important;
top: 0 !important;
}

We hope this buttons will be helpful for your future projects. If you have any questions of help related to your new buttons feel free to post us a comment. Enjoy!

 

Share This