CSS Buttons

Basic Buttons

The normal dull looking HTML button can also be stylized using different CSS properties.

The example below will make you understand how to use these properties to the buttons:

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Buttons </title>
<meta charset="UTF-8">
<style>
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>CSS Buttons</h2>
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">
</body>
</html>

Output

CSS Buttons Link Button

You can use different properties to stylize the buttons:

Button Colors: background-color:color;
Button borders: border:style;
Button Coloured Borders: border: width style color;

Rounded Buttons

The button's vertices can be changed into rounded ones by using border-radius property. In this way you also can make a fully rounded button.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Rounded Buttons </title>
<meta charset="UTF-8">
<style>
button {
background-color: green; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.blue-button {background-color: #008CBA;} /* Blue */
.red-button {background-color: #f44336;} /* Red */
.gray-button {background-color: gray;} /* Gray */
.black-button {background-color: black;} /* Black */
</style>
</head>
<body>
<h2>Button Colors</h2>
<p>Change the background color of a button with the background-color property:</p>
<button class="green-button">Green</button>
<button class="blue-button">Blue</button>
<button class="red-button">Red</button>
<button class="gray-button">Gray</button>
<button class="black-button">Black</button>
</body>
</html>

Output

CSS Rounded Buttons

Hoverable Buttons

The :hover selector will give the hover effect to the button. It displays the specified changes to the button when the mouse cursor moves over it.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Hover Buttons </title>
<meta charset="UTF-8">
<style>
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.green-btn {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.green-btn:hover {
background-color: #4CAF50;
color: white;
}
.blue-btn {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.blue-btn:hover {
background-color: #008CBA;
color: white;
}
.red-btn {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.red-btn:hover {
background-color: #f44336;
color: white;
}
.gray-btn {
background-color: white;
color: black;
border: 2px solid #e7e7e7;
}
.gray-btn:hover { background-color: #e7e7e7; }
.black-btn {
background-color: white;
color: black;
border: 2px solid #555555;
}
.black-btn:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>Hoverable Buttons</h2>
<p>Use the :hover selector to change the style of the button when you move the mouse over it.</p>
<button class="green-btn">Green</button>
<button class="blue-btn">Blue</button>
<button class="red-btn">Red</button>
<button class="gray-btn">Gray</button>
<button class="black-btn">Black</button>
</body>
</html>

Output

CSS Hover Buttons

Animated Buttons

Animation is possible in CSS3 which we'll discuss later. Just have a look at the example:

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Animated Button </title>
<meta charset="UTF-8">
</head>
<style>
button {
display: inline-block;
border-radius: 4px;
background-color: green;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 10px;
width: 150px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
<body>
<h2>Animated Button</h2>
<button class="button"><span>Hover </span></button>
</body>
</html>