Buttons are important. They’re how users navigate around your site and they’re how you encourage all manner of actions, from ‘contact us’ to ‘buy now’. Button design can literally be the difference between a yes and a no from a potential client or customer, so with so much riding on it, it’s not something you want to get wrong.
In this post, we’re going to go over some general tips for designing your own buttons and then give you these 8 ‘CSS Only’ Divi button designs that we’ve put together for you to download for free.
1. Buttons should be buttons
It should be very clear, even from a quick scan, that a button is indeed a button. We’re big fans of quirky and alternative designs, but where you require users to take an action, don’t go too far over the top. Equally, don’t keep things too basic; an underlining or boldening of text may have been an acceptable way to draw attention to something once upon a time, but to paraphrase Shania Twain, that don’t impress us much. At the very least we’re talking about a button being:
- In its own space, separated from the rest of the text.
- Bigger than the text around it.
- Either outlined with a border or a different background color.
2. Buttons should be uniformal
Buttons across your site should follow similar design principles: They don’t necessarily have to be the exact same, but they should be similar enough that they’re recognisable. Using different colors is okay but make sure there’s a reason to do so. For example, using green to denote a step forward in the process and and red to denote a step back. The same for font sizes and weights, make sure that they accent the flow you want the user to take. On a product page, if the ‘buy now’ button isn’t the most obvious call to action on the page, then you may wish to reconsider the design.
3. Buttons should be clear
If you’re not sure what a button does, you won’t use it, right? Your users are the same, so make sure that every button on your site is clear and concise in what it is for. ‘Call Now’ and ‘Buy Item’ are better than ‘you can contact us here’ or ‘get item today’. Anything that isn’t direct, is indirect by default so make sure your button text is straight to the point, there are plenty of other elements of the button where you can unleash your creativity.
4. Buttons should engage the user
Your buttons should provide some kind of visual change. Often referred to as ‘feedback’ or ‘micro-interactions’, it’s more than just a gimmick or fad. This is the design principle that acknowledges the user taking, or about to take an action. Mobile apps often take this one step further and provide haptic(vibration) or audible feedback. This is a nod to your user that the button they just pressed, did what it was supposed to.
These buttons have been designed with the principles discussed above in mind. They’re clean and easy to install and require no more than a custom CSS class to get started. The pack includes 8 unique designs, each taking advantage of a different way of providing visual feedback to the user clicking on them.
Using Throughout Your Site
The code module included in the layout includes all of the CSS used for the buttons. You can copy and paste this into your child theme stylesheet or into the CSS box in Divi Theme Options. Be sure to remove the <style> tags if you do so.
Downloading And Installing The Divi Button Pack
- Open the 8DiviButtons.zip folder and extract the JSON file.
- Open up a Divi powered page and click on the ↓↑ arrows in the purple page menu.
- Choose Import and install the JSON file when prompted.
You can then just add the following classes to any button module to use the design:
button-one button-two button-three button-four button-five button-six button-seven button-eight
There is no requirement to use any of the other button module settings. These CSS powered buttons will work automatically with just the class added. We hope you enjoy using these buttons as a starting point and look forward to hearing about what you’ve put together on the back of this post 🙂