AOA Friends today I am going to show you, How to create a Hover effect in an HTML Button using HTML and CSS.
Source Code is in the description.
<!DOCTYPE html>
<html>
<head>
<title>Hover effect on Button</title>
<style type="text/css">
body
{
background-color: black;
}
button
{
position: absolute;
top: 40%;
left: 37%;
height: 200px;
width: 350px;
color: green;
background:transparent;
border:3px solid green;
font-size: 70px;
font-family: POPPING;
border-color: red;
border-radius: 30px;
box-shadow: 0 10px 100px 0 green inset, 0 10px 100px 0 red;
transition: 2s;
}
button:Hover
{
box-shadow: 0 10px 100px 0 red inset,0 10px 100px 0 green,0 10px 100px 0 red inset,0 10px 100px 0 green;
}
</style>
</head>
<body>
<button>BUTTON</button>
</body>
</html>
just copy and paste in your text editor or ide.
and don't forget to Like, share, and subscribe to my youtube channel.
Comments