FacebookTwitter

CSS Button Style

By on Oct 5, 2014 in Beginners, CSS

Share On GoogleShare On FacebookShare On Twitter

Styling Buttons with CSS

Everyone needs buttons on their site. Buttons to submit a form, buttons to redirect to another page, buttons to open up widgets. Anyways you get the point. The challenge is that by default HTML buttons look very dull. That is why you must style your buttons using CSS to make them more appealing to your visitors. CSS button styling is not that complicated, but it could be challenging if your CSS knowledge is limited. Therefore, I’ve decided put together this simple tutorial to help you understand CSS Button Style. I will attempt to style a button steps by steps and then I will give you a bounce of different buttons styles from which you can pick.

CSS Button Style Breakdown

There are many ways you can get a button:

<button>Click me!</button>
<input type="submit">Click me!</button>
<a href="#">Click me!</a>

For this example I will be sticking with the button tag. This is good because you can use it to submit a form without having to rely on javascript, or you can also use it with javascript an do as you which by preventing default. Nevertheless, I will make classes for CSS Button Styles instead of directly affecting the button tag. The reason for this is that if you which to use something else than button, like a tag or input tag you can, all you have to do is assign the class to them, like this:

<a href="#" class="custom-button-style">Click Me!</a>

So with no further delay let’s get started. First lest do some basic styling to format the button.
CSS Button Style

1
2
3
4
5
6
7
8
9
10
11
.custom-button-style{
    padding: 10px 15px;
    margin: 20px auto;
    color: #FFFDFD;
    background-color: #555;
    border: 0 none;
     -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    cursor: pointer;
}

Something simple to start, nothing too fancy. So this is what the button looks like:

So now, lets go ahead and add some gradients:
CSS Button Style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.custom-button-style{
    padding: 10px 15px;
    margin: 20px auto;
    color: #FFFDFD;
    background-color: #555;
    border: 0 none;
     -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    cursor: pointer;
 
    /*gradient*/
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
}

Not bad so far. But it is missing something that all buttons should have, a hover event. If you really want to make nice buttons you have to give them a hover event, so when you hover over it comes alive. So let’s go ahead and do that!
CSS Button Style

1
2
3
4
.custom-button-style:hover {
        background: -webkit-linear-gradient(#4D4B4B, #3C3C3C);
        background: linear-gradient(#4D4B4B, #3C3C3C);
    }

Now it looks more like a button, with hover event and everything. As you can see it is very simple to style buttons with CSS. You should be able to copy the code and use it on your own site, just make sure to assign the class .costum-button-style to your buttons. And now as I promised before here is a list of different button styles you can use:









CSS Button Style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
    .custom-button-style {
        padding: 10px 15px;
        margin: 20px auto;
        color: #FFFDFD;
        background-color: #555;
        background: -webkit-linear-gradient(#888, #555);
        background: linear-gradient(#888, #555);
        border: 0 none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        cursor: pointer;
    }
 
    .custom-button-style:hover {
        background: -webkit-linear-gradient(#4D4B4B, #3C3C3C);
        background: linear-gradient(#4D4B4B, #3C3C3C);
    }
 
    .custom-button-style-1 {
        padding: 10px 15px;
        margin: 20px auto;
        color: #FFFDFD;
        background-color: #4583D1;
        border: 2px solid #4073CE;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        cursor: pointer;
    }
 
    .custom-button-style-1:hover {
        background-color: #3078D3;
        border: 2px solid #174CAA;
    }
 
    .custom-button-style-green {
        padding: 10px 15px;
        margin: 20px auto;
        color: #FFFFFF;
        background-color: #4CC27B;
        border: 0 none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }
 
    .custom-button-style-green:hover {
        background: -webkit-linear-gradient(#00A85E, #177E38);
        background: linear-gradient(#00A85E, #177E38);
    }
 
    .custom-button-style-red {
        padding: 10px 15px;
        margin: 20px auto;
        color: #FFFFFF;
        background-color: #C24C4C;
        border: 0 none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }
 
    .custom-button-style-red:hover {
        background: -webkit-linear-gradient(#A80000, #7E1717);
        background: linear-gradient(#A80000, #7E1717);
    }
 
    .custom-button-style-orange {
        padding: 10px 15px;
        margin: 20px auto;
        color: #FFFFFF;
        background-color: #C28E4C;
        border: 0 none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }
 
    .custom-button-style-orange:hover {
        background: -webkit-linear-gradient(#A87200, #7E5917);
        background: linear-gradient(#A87200, #7E5917);
    }
 
    .custom-button-style-small {
        padding: 4px 8px;
        margin: 20px auto;
        color: #FFFFFF;
        background-color: #C28E4C;
        border: 0 none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }
 
    .custom-button-style-small:hover {
        background: -webkit-linear-gradient(#A87200, #7E5917);
        background: linear-gradient(#A87200, #7E5917);
    }
 
    .custom-button-style-large {
        padding: 20px 40px;
        margin: 20px auto;
        color: #FFFFFF;
        background-color: #C28E4C;
        border: 0 none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        font-size: 22px;
    }
 
    .custom-button-style-large:hover {
        background: -webkit-linear-gradient(#A87200, #7E5917);
        background: linear-gradient(#A87200, #7E5917);
    }
 
    .custom-button-style-round {
        padding: 10px 15px;
        margin: 20px auto;
        color: #FFFFFF;
        background-color: #4CAFD7;
        border: 0 none;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }
 
    .custom-button-style-round:hover {
        background: -webkit-linear-gradient(#35ADC4, #00738A);
        background: linear-gradient(#35ADC4, #00738A);
    }
Enmanuel Corvo

Enmanuel Corvo

Software Engineer at LiveAnswer
Enmanuel Corvo is a Software Engineer experienced in Web Applications Development. Huge fan of WordPress and an active plug-in author who enjoys writing code and blog posts about anything related to technology.
Enmanuel Corvo

Latest posts by Enmanuel Corvo (see all)