CSS Buttons

In this CSS button tutorial, we will transform dull looking HTML buttons. With CSS, button can be designed by applying different CSS properties. This is going to be awesome. We will learn about Bootstrap buttons classes, animated CSS buttons, rounded CSS buttons and so on. Let's start!

Various CSS Properties like CSS Padding, Margins, Borders, Hover, etc., can be used on a CSS button. An efficient and intelligent use of these CSS Properties will result in a beautiful and user appealing button.

Basic example of CSS buttons

Example Try this code »

<!DOCTYPE html> <html lang="en"> <head> <title> CSS Buttons </title> <meta charset="UTF-8"> <style> .button-style { 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> <p><button>Default Button</button></p> <p><a href="#" class="button-style">Link Button</a></p> <p><input type="button" class="button-style" value="Input Button"></p> <button class="button-style">CSS Button</button> </body> </html>

Output

CSS Buttons

Link Button

Explanation of CSS Properties used :

In the example above, various CSS properties are used for CSS button styling. Different properties worked together to change the default shape, size and style of buttons.

Change CSS Button Color: background-color:color;
Apply simple Button borders: border:style;
Apply color on Button borders: border: width style color;
Add padding to increase Button size: padding: value;
Align the Button text in center: text-align: center;

CSS Round Buttons

CSS round buttons are those buttons in which the sharp edges of buttons are turned into round-shaped.

The border-radius property makes the borders of an element round shaped. This property can also create a fully rounded button, like a perfect circle. Add border-radius:50%;, it will result in a full circle button. Have a look at the example, to see CSS rounded buttons.

Example Try this code »

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .button { background-color: blueviolet; border: none; color: white; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;} </style> </head> <body> <h2>Rounded Buttons</h2> <p>Add rounded corners to a button with the border-radius property:</p> <button class="button button1">2px</button> <button class="button button2">4px</button> <button class="button button3">8px</button> <button class="button button4">12px</button> <button class="button button5">50%</button> </body> </html>

Output

Rounded Buttons

Add rounded corners to a button with the border-radius property:

CSS Buttons Hover Effect- Pseudo class

Button Hover effect means changing CSS of an element when mouse hovers over it. By applying hover effect we can change color, size, padding, or any other value of CSS. Those changed values will only reflect when we place cursor over the button.

The :hover selector is used to create hover effect. It is a pseudo class that works in combination with other selectors. Pseudo classes has no meaning by themselves, they has to get combined with any other selector to perform their given function.

Look at the example of Hover Effects below. Analyze the use of :hover pseudo class and do some changes by yourself to get familiar with 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

Bootstrap button classes

Bootstrap button classes is another way to give a quick and attractive makeover to the button. Bootstrap has many pre-defined classes that are ready to use. Although the style of these classes is pre-defined, you can easily override the default style by giving your own inline CSS or by using ID's.

There are various bootstrap button that you can use-

.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

There are other classes also to control size of CSS button. We will cover that into Bootstrap tutorial.

Steps to use Bootstrap button classes

Add Bootstrap library on the webpage. You will get all the information from Bootstrap official website.
Create a button by using HTML button tag. You can also use these classes with Anchor Tag and input tag.
Add bootstrap classes on the buttons by using class attribute.

Example of bootstrap button classes

Example Try this code »

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Button Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Button Styles</h2> <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> </div> </body> </html>

Output

Button Styles

Animated Buttons with CSS Animation

CSS buttons can be animated using CSS Animations. It is quite impressive right. The Animation properties were introduced with CSS3. Right now you don't have to worry about how to do animation using CSS. We will discuss it throughly, later in the tutorial.

Look at the example below to see the animation used with CSS buttons.

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>