Styled buttons aid in the creation of appealing websites. You can apply a wide range of styles to the buttons. This is an article on button styling. Construct a button. Create a button element first. Make your button unique. It’s now beneficial to implement colors to your button. The hover state can be customized. The third thing is to style this same hover state so that the user can see when the status of the button changes.
1. Design a button
Construct a button> element first.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type=”button”>Submit</button>
</body>
</html>
2. style your button
So now is the time to customize your button.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
button {
display: inline-block;
background-color: #7b38d8;
border-radius: 10px;
border: 4px double #cccccc;
color: #eeeeee;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<button type=”button”>Submit</button>
</body>
</html>
3. Customize the hover effect
The third step is to style the hover state.
button:hover {
background-color: green;
}
A button styling using the button> tag is styled as follows:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
button {
display: inline-block;
background-color: #7b38d8;
border-radius: 10px;
border: 4px double #cccccc;
color: #eeeeee;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
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 {
background-color: #f7c2f9;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>Style buttons</h2>
<button>
<span>Submit</span>
</button>
</body>
</html>