Get Free CSS awesome buttons for blog or website with Hover Effect and make your site cool and professional.
These awesome buttons are very easy to customize. Just follow the guide included in Source Code.
Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
.TutorialsProButton {
background-color: transparent; /*Default background color is Transparent. You can change color*/
padding: 10px 32px; /*Chnage Height of button by changing 10px value*/
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px; /* Font Size of Button */
margin: 4px 2px;
cursor: pointer;
max-width: 200px; /* Change It to Set Fix Width */
width: 200px; /*Change It to Set Fix Width */
-webkit-transition-duration: 0.5s; /* Safari *//* Set Hover Animation Time Here */
transition-duration: 0.5s; /* Set Hover Animation Time Here */
}
.button1 {
background-color: white; /* Button 1 Background Color */
color: black; /* Font Color */
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50; /* Background Color When Hover */
color: white; /* Font Color When Hover */
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA; /* Background Color When Hover */
color: white;/* Font Color When Hover */
}
</style>
</head>
<body>
<div style="text-align: center">
<button class="TutorialsProButton button1">Button1</button>
<button class="TutorialsProButton button2">Button2</button>
</div>
</body>
</html>
