Posted by admin at April 16, 2020

Buttons are a key way that your users will interact with your page. Often buttons are a call to action for your user- so you will want them to stand out!

When styling a button you aren’t just styling the text, but also the area around it, including the border. By giving them a distinct background color or border you make it clear that this whole area is “clickable”.

Typically your user will expect your button to be wider than it is tall, to accomplish this you’ll want to set the left and right padding to be greater than the top and bottom paddings. 

Here is an example of a button where it’s not immediately clear that it is actually a button. 

Button 1

This design is a pretty traditional button where it has a distinct background-color and border-color to help it stand out from both the background and the body text.

2 6 2 button 1 - Buttons
#design1 {
    background-color: #94618E;
    color: #F8EEE7;
    font-family: Corbel;
#design1 button {
    background-color: #F4DECB;
    padding: 10px 25px;
    border: 5px solid #F8EEE7;
    color: #49274A;
    font-weight: bold;
    font-size: 1.2em;

Button 2

This is a more modern button design where there is no distinct border, but just a flat color background.

2 6 2 button 2 - Buttons
#design2 {
    background-color: #D9D9D9;
    color: white;
    font-family: "Century Gothic", sans-serif;
#design2 button {
    background-color: #4484CE;
    border: 0px;
    color: white;
    padding: 10px 50px;
    font-family: Impact, sans-serif;
    font-size: 1.3em;

Button 3

This is a big graphic button that uses border-radius to give the button rounded corners.

2 6 2 button 3 - Buttons
#design3 {
    font-family: Impact, sans-serif;
    font-size: 2em;
#design3 button {
    font-family: Impact, sans-serif;
    font-weight: 100;
    background-color: white;
    border: 7px #EC576B solid;
    border-radius: 20px;
    font-size: 0.8em;


Write a Reply or Comment