How to Build a Beautiful CSS Button

You can design buttons on your website using no image at all. All you need is CSS and an HTML5 compliant browser. With just these two, you can build a beautiful CSS button. I will show you how.

Beautiful CSS Buttons
Build Beautiful CSS Buttons with minimal Code

Why build a CSS Button?

The first question that should pop in your head is that why build a CSS button when you can do it in one line of code with some image background? The answer is that the one line of code is cheap in terms of bytes, but the image it has to load is not. On the other hand, buttons created with CSS are dynamic, platform and often screen size independent. Also, they are often cheaper for the browser to load and process than some png image file.

Getting Started with building CSS Button of our dreams!

We will start with the basics. First create an empty folder (say) ‘Button‘ and put one empty CSS file  ‘mybutton.css‘ in it. You can use any text editor for this but I highly recommend Notepad++. Also create a ‘HTML’ file and name it index.html in the same folder.

Now we can get into coding. We will start with a very simple and minimal layout.

<DOCTYPE html>
<html>
<head>
<title>Check out my button!
</title>
<link rel="stylesheet" type="text/css" href="mybutton.css">
</head>
<body>
<div > 
 <a href="#" class="myButton"> CHECKOUT </a> 
</div>

</body>
</html>

You can see what the code does above. The first line is important, otherwise browsers don’t understand if you want to render using HTML5 or not. With the link statement the CSS file is imported. The button is created next, which basically is just a link that is made to work like a button. Save the file and load it in any browser of your choice. Your beautiful CSS button will make you want to puke.

Why is it so ugly?

It’s ugly because the mybutton.css file is empty. You must be having some idea about what stylesheets are. They are basically the makeup that websites have to look good. They can also use a single template for multiple elements. So here’s how you can add some code to this.

Check the class=”myButton” tag used in the HTML file. This myButton is your CSS selector. You can add your styles to this selector simply by doing something like this below.

.myButton { font-weight: bold; }

This will hardly do anything, other than making the text bold. But you get the point. All buttons we attach this class to, will show similar attributes. So we will go ahead and add some meaningful styles that truly make our beautiful CSS button shine.

.myButton {
 margin: 25px;
 background: -webkit-linear-gradient(rgb(208, 208, 208), rgb(202, 202, 202), rgb(168, 168, 168));
 display: inline-block;
 cursor: pointer;
 color: #5C5C5C;
 font-family: "Helvetica";
 font-size: 28px;
 font-weight: bold;
 padding: 10px 20px;
 text-decoration: none;
 text-shadow: 0px 1px 0px #DBDBDB;
 border-radius: 10px;
 box-shadow: inset 0px 29px 4px rgba(226, 226, 226 , 0.5), 
 0px 1px 5px #222, 
 0px 0px 0px 8px #CCC, 
 0px 0px 0px 10px #FFF, 
 0px 0px 0px 12px #626262, 
 0px 2px 7px 10px #444;
}

Now save it and reload the page in your browser. It does look pretty, does it not? Most of the styles are simple and self explanatory. You can alter the values to see the difference it makes and play around.

But note two interesting areas – background and box-shadow. The linear gradient applied to the background purely using CSS is not a novelty but the box-shadow use in this way is rather rare. You will see the box-shadow contents broken down into many comma separated values. Remove any single line and test. It will show you that instead of adding multiple box-shadows on cascading elements, we can simply add it to one single style element itself, separated with commas.

From one border to the next, it has all been drawn by this simple box-shadow alone. Remove the box-shadow entirely and just see the huge difference.

Adding some masala!

Indians love this. Spice is what keeps us going – many times at least. So we will add two stars on either side of the text of the button, within the button boundary just because we can! We have a few choices to do this –

  • Go full CSS – Draw a CSS star starting with pseudo selectors. This is possible but aligning and positioning it is very difficult, time consuming, tedious and costly in terms of code. So this is pretty much the full retard option.
  • Go SVG – HTML5 does allow SVG codes to be embedded and it remains resolution independent, being a vector image. But we won’t take this route as some mobile browsers may have trouble drawing it. Plus this code is also slightly expensive in terms of length.
  • Use a CSS content code – You can use some exotic UNICODE characters in your page, but often they will not be rendered properly. But for our beautiful CSS button we will go ahead with the smart alternative to that using a content style that will take care of the compatibility. We will just add this to our code, specifically to the mybutton.css file.
.myButton:before, .myButton:after {
 content: "\2605";
 font-size: 30px;
 color: #888;
}
.myButton:active {
 position:relative;
 top:1px;
}

We can now save this and load the HTML file up in the browser. and voila, our beautiful CSS button is ready! Thanks to fullimmersion and github.

You can download the entire code for this beautiful CSS button here – CD Button

  • indianHeart

    Custom
    create beautiful web page buttons with CSS3 button
    generator and CSS3 button creator. – buttongarage.in