Create CSS Buttons - A Step-by-Step Tutorial

A Step-by-Step Tutorial for beginners to create CSS Buttons.

Using CSS Buttons instead of images is always advantageous. You can come up with amazing button styles with few lines of CSS code. The possibility of the button styles is almost unlimited. If you are a CSS expert then you already know how to create buttons with CSS. However if you are a newbie, having some pretty good ideas for buttons but don't know where to start with, this is the tutorial for you.

Creating buttons with CSS is fairly simple. Though the buttons look different implementing them is always the same. We’ll see now how to create a CSS Button step by step.

Recommended Read: How to Create Round Social Media icon style buttons using CSS

Steps in Creating a CSS Button

• Step 1: First create a CSS class with a name of your choice.

.myButton {
     //CSS styles here
}

• Step 2: Next add some CSS code to the class to define the look and feel of your imaginary button.

.myButton {
     display: inline-block;
     cursor: pointer;
     color: #FFF;
     background-color: #66A6CB ;
     padding: 10px 15px;
     font: bold 20px arial;
     text-align: center;
     text-decoration: none;
     border: 2px solid #FFF;
     border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     box-shadow: 0px 0px 5px #999;
     -moz-box-shadow: 0px 0px 5px #999;
     -webkit-box-shadow: 0px 0px 5px #999;
}

• Step 3: Next add some hover styles if you want.

.myButton:hover
{
     color: #66A6CB;
     background-color: #FFF;
     border: 2px solid #66A6CB;
}

• Step 4: Now add this CSS button class you have created to an <a> (anchor) tag in your HTML file.

<a href="#" class="myButton">Click Here</a>

---

Demo

Click Here

Please roll the mouse over the button to see the hover effect.

---

That's it. You have successfully created your CSS Button. Now try with different styles until you are satisfied with the button looks and behavior.