Welcome DIVI people to our series of freebies giveaway that will be ongoing for next few weeks. We are going to giveaway series of buttons every few days from our collection that we were using for our projects and themes, and also write you few tips how to customize them.

You can easily implement all of this buttons and use them trough DIVI builder, and we will show you how trough simple steps bellow. For introduction lets see how these buttons look:

buttons

Also, you can see demo and all hover effects and sizes here:

 

View demo

To use this buttons first download package with json file and CSS necessary for this buttons to work

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-1.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 copy all CSS from this file and save. Now you are ready to use this buttons.

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

We have also prepared for you all buttons sizes saved in the library so instead, if you find that easier you can load certain section of buttons, and then use them.

2) Changing button color and border size:

If you want to change button colors you will need to edit a bit of CSS. For every button, you will need to find a class from dc_style_clean_1 to dc_style_clean_6, which are classes for different button styles and effects. In every one of this classes you will find the same pattern of code like following:

dc_style_clean_1{
 border: 3px solid #fff;
 color: #fff !important;
 background:transparent;
}
.dc_style_clean_1:hover,
.dc_style_clean_1:active {
 border: 3px solid #fff;
 color: #0e83cd !important;
 background: #fff !Important;
}

So to change colors of a certain button, first open button module and in custom CSS check which class is appended. Then find the block of code with this class in CSS and change hex colors to desired ones.

When it comes to changing border size you need to change the amount of pixels in the same block of code. Currently, it is set to 3px, so if you prefer more or less you can change it there.

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