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

buttons-green

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, 2 and 3 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-4.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 & 3, you need to extract files from Divi Center buttons 1, 2 & 3 zip that is included and copy CSS from there too. Also if you want to use buttons from DC buttons part 1, 2 and 3 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 4 main classes for this buttons so you can change sizes easily without writing your own CSS:

  1. dc_icon_button_xl
  2. dc_icon_button_l
  3. dc_icon_button_m
  4. dc_icon_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_button_pill {
 border-radius: 50px;
 border: 2px solid #fff !important; /* CHANGE HEX COLOR CODE HERE */ 
 color: #fff !important; /* CHANGE HEX COLOR CODE HERE */ 
 overflow: hidden;
}

.dc_button_pill:active {
 border-color: #17954c; /* CHANGE HEX COLOR OF BORDER THAT APPEARS ON CLICK */ 
 color: #17954c; /* CHANGE TEXT COLOR THAT APPEARS ON CLIKC */ 
 border: 2px solid #fff !important;
}

.dc_button_pill:hover {
 background: #24b662; /* CHANGE BACKGROUND COLOR ON HOVER HERE */
 border: 2px solid #fff; /* CHANGE BORDER COLOR ON HOVER HERE */
 color:#fff !important; /* CHANGE COLOR OF TEXT ON HOVER HERE */
}

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_button_pill_1, .dc_button_pill_2, .dc_button_pill_3 etc. If you for example want to change the icon of the .dc_button_pill_1, 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 “\f0fb. 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_button_pill_1:before {
 left: 130%;
 top: 0;
 content:"\f0fb"; /* CHANGE FONT AWESOME UNICODE HERE */ 
 font-family:FontAwesome;
}

 

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