Hello Friends, Today in this blog you'll learn how to create a simple button with a hover effect using HTML and CSS.
In HTML, the Buttons represent a clickable box, used to submit forms or anywhere in the document. I have created three buttons that have different colors like green, red, blue you can simply change the color of the button.
You may like these:-
Simple Buttons With Hover Effect [Video Tutorial]
Simple Buttons With Hover Effect [Source Code]
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons | InCoder</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<button class='inBtn inBtn-primary'>Submit</button>
<button class='inBtn inBtn-danger'>Submit</button>
<button class='inBtn inBtn-info'>Submit</button>
</div>
</body>
</html>
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap");
* {
margin: 0;
padding: 0;
}
body {
background-color: #202020;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.inBtn{
color: #fff;
user-select: auto;
padding: 6px 15px;
font-size: 15px;
outline: none;
border-radius: 5px;
cursor: pointer;
transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
transform: scale(.9);
}
.inBtn:hover{
transform: scale(1);
}
.inBtn-primary{
border: 2px solid #3cc091;
background: #3cc091;
}
.inBtn-danger{
border: 2px solid #f42c53;
background: #f42c53;
}
.inBtn-info{
border: 2px solid #0b97b4;
background: #0b97b4;
}
Here is the final output of code:
I hope you liked it. So if you want to make it then you've to create two files HTML & CSS. you can name it whatever want but make sure that the extension of the HTML file is [.HTML] and the CSS file's extension is [.CSS] after creating these two files simply copy the HTML code in the HTML's file and CSS code in CSS's File. Make sure one thing that both files are on the same destination and link CSS File properly in HTML File. If you simply want to download files you can download them here.
Zip File's Password = InCoderWeb
Tags:
CSS Buttons