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:
<!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
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.
<!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.
<!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:
<!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>
Output
CSS Animated Button

Country Code
List of Country code supported by all browser »