Creating buttons using CSS

This article is going to demonstrate how easily buttons can be created by customizing anchor tag using CSS.

Demo

This is how our final button will look like. Its simple button but hope it will give you basic idea to help you create more beautiful buttons.

Click Me

Concepts

Before we begin, I just want to let you know what attributes I'm going to change using CSS.

I'm creating a class named 'mybutton' and then I'm adding it to my anchor tag and make it act like button.

By default anchor tag is inline element. So first you need to make it block element by changing its display property. I'm doing this so that I can add width to my button. Inline elements don't allow to customize their width and take the size according to their content. I'm giving it padding so that it gets properly aligned in vertical direction. If you are confused about padding then just try to give some height to your button.

Rest of the properties are simple to understand. I'm just giving it border and background color. And on hover I'm changing its color and border to make it look like that it has been pressed.

Code

Finally here's all the code that you need. Save both files in the same folder. File names have been written above the code.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Creating buttons using CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>This is my sample button - Syntax Page</h1>
<a href="#" class="mybutton">Click Me</a>
</body>
</html>

style.css

.mybutton
{
		background:cornflowerblue;
		color:#fff;
                display:block;
		padding:5px 10px;
		border:2px outset cornflowerblue;
		text-decoration:none;
		text-align:center;
                width:300px;
}

a.mybutton:hover
{
		border:2px inset cornflowerblue;
                color:#000;
}