In the following tutorial, we’re going to show you 5 easy ways to modify your Bootstrap button styles. This is a quick and easy way to differentiate your site from the default Bootstrap look.
Initial Setup
We modified the default Bootstrap
.btn class with the following CSS styles. These styles are only required if you’re looking to achieve the same look and feel as our button pack. Otherwise, you can stick with the default Bootstrap styles for now.
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
|
.btn {
padding: 14px 24px;
border: 0 none;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline: 0 none;
}
.btn-primary {
background: #0099cc;
color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
background: #33a6cc;
}
.btn-primary:active, .btn-primary.active {
background: #007299;
box-shadow: none;
}
|
Now that we’ve modified our
.btn class, let’s go over our custom button classes.Sharp Buttons
To create sharp buttons, simply set your border radius to 0.
1
2
3
|
.btn.sharp {
border-radius:0;
}
|
Outline Buttons
The first step in creating an outline button is to remove the background. Since we’ll be increasing the border width, you also need to reduce the button padding. Otherwise, your button will appear oversized.
1
2
3
4
|
.btn.outline {
background: none;
padding: 12px 22px;
}
|
Next, you need to increase the thickness of the border and change the color to match the border.
1
2
3
4
|
.btn-primary.outline {
border: 2px solid #0099cc;
color: #0099cc;
}
|
Finally, you can add some hover effects by modifying the color and border colors when hovering over the button.
1
2
3
4
5
6
7
8
9
|
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
color: #33a6cc;
border-color: #33a6cc;
}
.btn-primary.outline:active, .btn-primary.outline.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
|
Gradient Buttons
With gradient buttons, you’ll need a starting and ending color. While a typical linear gradient starts with one color and fades to another, this example has a hard shift in color halfway through the button. You’ll notice all the different lines we’ve added and that’s simply for compatibility across older browsers.
1
2
3
4
5
6
7
8
9
|
.btn-primary.gradient {
background: -moz-linear-gradient(top, #33a6cc 50%, #0099cc 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* IE10+ */
background: linear-gradient(to bottom, #33a6cc 50%,#0099cc 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */
}
|
Next, we lighten the buttons when hovering over them.
1
2
3
4
5
6
7
8
9
|
.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary {
background: -moz-linear-gradient(top, #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* IE10+ */
background: linear-gradient(to bottom, #66b2cc 50%,#33a6cc 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */
}
|
Finally, we darken the buttons when they’re active/clicked.
1
2
3
4
5
6
7
8
9
|
.btn-primary.gradient:active, .btn-primary.gradient.active {
background: -moz-linear-gradient(top, #267c99 50%, #007299 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #267c99 50%,#007299 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #267c99 50%,#007299 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #267c99 50%,#007299 50%); /* IE10+ */
background: linear-gradient(to bottom, #267c99 50%,#007299 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); /* IE6-9 */
}
|
Rounded Buttons
To get the rounded look, simply increase the pixel size on the border radius.
1
2
3
|
.btn-lg.round {
border-radius: 24px;
}
|
Raised Buttons
First, you need to create a box shadow to give the effect that the button is raised.
1
2
3
|
.btn-primary.raised {
box-shadow: 0 3px 0 0 #007299;
}
|
Then, you need to remove the box shadow and modify the margins when the button is activated.
1
2
3
4
5
6
|
.btn-primary.raised:active, .btn-primary.raised.active {
background: #33a6cc;
box-shadow: none;
margin-bottom: -3px;
margin-top: 3px;
}
|
Download The Button Pack
I hope you found this tutorial helpful. If you liked these button styles, make sure to download the button pack.
No comments: