CSS Basic Tutorial
CSS Introduction
CSS Tutorials
CSS Syntax
CSS How To Use
CSS Selector
CSS Background
CSS Display
CSS Float
CSS Font
CSS Icon
CSS Link
CSS Table
CSS Line Hight
CSS Opacity
CSS Height & Width
CSS Overflow
CSS Position
CSS White Space
CSS Word Wrap
CSS Box Model
CSS Box Model
CSS Padding
CSS Margin
CSS Border
CSS Advance
CSS Forms
CSS Navigation Bar
CSS Tooltip
CSS Buttons
CSS Pagination
CSS Attribute Selectors
CSS3 Features
CSS3 Drop Shadows
CSS3 2D Transforms
CSS3 3D Transforms
CSS3 Transition
CSS3 Animation
CSS3 Layout
CSS3 Filter
CSS3 Media Queries
Reading
CSS3 Interview Questions
Advertisement
Advertisement
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>
<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.
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>
<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
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>
<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
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>
<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
Recommended :
