This CSS tutorial explains how to create custom CSS classes for buttons with great look and feel. If you are into Web development, very probably you must have ran into some CSS framework like Blueprint , Bootstrap , Green and Pure are some examples. They all have their peculiarities and offer great classes for creating responsive sites and implementation of UI elements, including buttons (which is the focus of this article). But how about learning how to create your own set of class for buttons?.
Without many frills, we will see in the following sections how to create simple and interesting CSS classes for buttons. The first thing to do is to create a class for, say, button base. This class will contain all the basic appearance of buttons, including its size and the font size. Let’s call it . but (button).
Listing 1: CSS code:style.css
/* Basic Button */
.but {
display: inline-block;
background-color: #ccc;
color: #444;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
border: 0px;
}
Listing 2: Sample.html
<html> <head> <title>Basic Button</title> <link rel="stylesheet" href="style.css"> </head> <body> <a class="but">Normal Button</a> <button type="but">Normal Button</button> </body> </html>
Open the above html in your browser and the following button would be displayed:
You can also include a link to open a page in a new window:
Listing 3: Revised.html
<html>
<head>
<title>Basic Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a class="but" href="http://www.javabeat.com" target="_blank">Normal Button</a>
<button type="button" onclick="window.open('http://www.javabeat.com');">Normal Button</button>
</body>
</html>
Let’s make the Button more stylish and intuitive. We will darken it a bit when the user hovers over (using the pseudo-class : hover ). The cursor also change to the classic little hand when passed over the button.
Listing 4: Revised CSS style.css
/* Basic Button */
.but {
display: inline-block;
background-color: #ccc;
color: #444;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
border: 0px;
}
.but:hover {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
cursor: pointer;
}
Open the html in your browser and you can see the effect. Actually, we are not darkening the color of the button, but adding to it a gradient that goes from transparent to a translucent black. You will understand why this is more up front.
Now that we have a button base, we can create classes for other buttons. Below are classes for primary button (blue), button success (green), button error (red) button and a warning (yellow / orange). In fact, what these classes do is just change the background color and font color.
Listing 5:Revised CSS style.css
/* Basic Button */
.but {
display: inline-block;
background-color: #ccc;
color: #444;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
border: 0px;
}
.but:hover {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
cursor: pointer;
}
/* CORES */
.but-primary {
color: #fff;
background-color: #0068B4;
}
.but-success {
color: #fff;
background-color: #009835;
}
.but-error {
color: #fff;
background-color: #CC0000;
}
.but-warning {
color: #fff;
background-color: #F28E00;
}
To see this in practice, add the following lines to your HTML:
Listing 6: Revised HTML
<html> <head> <title>Basic Button</title> <link rel="stylesheet" href="style.css"> </head> <body> <a class="but" href="https://javabeat.net" target="_blank">Normal Button</a> <a class="but but-primary" href="https://javabeat.net" target="_blank">Primary Button</a> <a class="but but-success" href="https://javabeat.net" target="_blank">Success Button</a> <a class="but but-error" href="https://javabeat.net" target="_blank">Error Button</a> <a class="but but-warning" href="https://javabeat.net" target="_blank">Warning Button</a> </body> </html>
Open the above html in your browser and the following button would be displayed:
Note that when you pass the cursor over each of them, the effect remains dark. That’s because we use the gradient with translucent black. That is, instead of creating one dark version of each color, we work with a translucent black that acts as a dimmer.
Buttons created, we can now leave for optional classes of effects. These classes are for adding things like shadows or rounded corners to buttons. Class .shadow-but adds a shadow of 1 pixel.Take the class .but-rc (rounded corners), it add rounded corners.
Listing 7: Revised CSS style.css
/* Basic Button */
.but {
display: inline-block;
background-color: #ccc;
color: #444;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
border: 0px;
}
.but:hover {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
cursor: pointer;
}
/* CORES */
.but-primary {
color: #fff;
background-color: #0068B4;
}
.but-success {
color: #fff;
background-color: #009835;
}
.but-error {
color: #fff;
background-color: #CC0000;
}
.but-warning {
color: #fff;
background-color: #F28E00;
}
/* Effects */
.but-shadow {
box-shadow: 1px 1px 1px #999;
}
.but-rc {
border-radius: 4px;
}
We now have the following HTML snippet:
Listing 8: RevisedHTML
<html> <head> <title>Basic Button</title> <link rel="stylesheet" href="style.css"> </head> <body> <a class="but but-shadow but-rc" href="https://javabeat.net" target="_blank">Normal Button</a> <a class="but but-primary but-shadow but-rc" href="https://javabeat.net" target="_blank">Primary Button</a> <a class="but but-success but-shadow but-rc" href="https://javabeat.net" target="_blank">Success Button</a> <a class="but but-error but-shadow but-rc" href="https://javabeat.net" target="_blank">Error Button</a> <a class="but but-warning but-shadow but-rc" href="https://javabeat.net" target="_blank">Warning Button</a> </body> </html>
Open the above html in your browser and the following button would be displayed:
Finally, now let’s have buttons of different sizes. With the classes below we can create buttons small, medium and large. Basically, they change the font size to 60% (small), 100% (normal) or 140% (large). But that percentage would be in relation to what? However, compared to the font size of . For this to work well, you must then set a font size for the . Generally, the standard size in browsers is 16px.
Listing 9: Revised CSS style.css
/* Basic Button */
.but {
display: inline-block;
background-color: #ccc;
color: #444;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
border: 0px;
}
.but:hover {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
cursor: pointer;
}
/* CORES */
.but-primary {
color: #fff;
background-color: #0068B4;
}
.but-success {
color: #fff;
background-color: #009835;
}
.but-error {
color: #fff;
background-color: #CC0000;
}
.but-warning {
color: #fff;
background-color: #F28E00;
}
/* Effects */
.but-shadow {
box-shadow: 1px 1px 1px #999;
}
.but-rc {
border-radius: 4px;
}
body {
font-size: 14px;
}
/* Sizes */
.but-small {
font-size: 60%;
}
.but-regular {
font-size: 100%;
}
.but-large {
font-size: 140%;
}
Listing 10: Revised HTML
<html> <head> <title>Basic Button</title> <link rel="stylesheet" href="style.css"> </head> <body> <a class="but but-shadow but-rc but-small " href="https://javabeat.net" target="_blank">Normal Button</a> <a class="but but-primary but-shadow but-rc but-regular" href="https://javabeat.net" target="_blank">Primary Button</a> <a class="but but-success but-shadow but-rc but-large" href="https://javabeat.net" target="_blank">Success Button</a> </body> </html>
Open the above html in your browser and the following button would be displayed:
Following this reasoning, you can create new classes or update existing ones. For example, if you want the text of the buttons always appear in uppercase, you can add the property text-transform the class :
. but : text-transform: uppercase;
Or, if you want to apply the property to all buttons, you can create a class and add it to the buttons just where you want the text to appear in upper case. Let’s name this class . but-uppercase and put it near the other classes of effects. We will now read as follows:
/* Effects */
.but-shadow {
box-shadow: 1px 1px 1px #999;
}
.but-rc {
border-radius: 4px;
}
.but-uppercase {
text-transform: uppercase;
}
Summary
Through this article I tried to brief you about how to create classes for buttons using CSS. Use your creativity to create new classes. Hope you enjoyed the article. If you have any questions, please write it in the comments section.
Introduction to Foundation 3 Framework