This is the second part of Divi buttons series of freebies. This post is a follow-up to a previous post in this series which you can visit here. Down bellow you can see how these buttons look and how you can use them and customize. These buttons are different than previous ones as they have a partial effect on hover and full effect on activate (click). So make sure that if you are watching demo that you click trough them a bit to demonstrate what they are about.

demo

 

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. 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 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-2.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, you need to extract files from Divi Center buttons 1 zip that is included and copy CSS from there too. Also if you want to use buttons from DC buttons part 1 post you will need to upload a JSON in Divi library from Divi Center buttons 1 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. There are 4 main classes in CSS for this buttons related to its sizes:

  1. dc_size_xl
  2. dc_size_l
  3. dc_size_m
  4. dc_size_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 and sizes to this button, you will find this block of code in the beginning of the CSS file we included:

.dc_style_real_button{
background: #cb4e4e !important; / * Change hex color code here */
color: #fff !Important; /* Change hex color code here */
box-shadow: 0 6px #ab3c3c !important;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
border:none !Important;
}

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

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