Source Code of CSS Hover effect on Button
Note - If you are opening this website to your smart phone. I recommend you to use your phone on desktop mode for better experience.
HTML Code
<!DOCTYPE html><html lang="en"><head> <title>Document</title> <link rel="stylesheet" href="stylesheet.css"></head><body> <input type="button" value="Subscribe" class="Subscribe"></body></html>CSS Code
body{ background: black;}.Subscribe{ margin-top: 100px; margin-left: 200px; padding: 5px; border: 1px solid red; cursor: pointer; text-shadow: 2px 2px 5px ; background: transparent; border-radius: 100px;}
.Subscribe:hover{ background-color: red; color: white;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<input type="button" value="Subscribe" class="Subscribe">
</body>
</html>
body{
background: black;
}
.Subscribe{
margin-top: 100px;
margin-left: 200px;
padding: 5px;
border: 1px solid red;
cursor: pointer;
text-shadow: 2px 2px 5px ;
background: transparent;
border-radius: 100px;
}
.Subscribe:hover{
background-color: red;
color: white;
}
Conclusion - So i hope you like this post. You can add more css properties to make it more better and functionable.
0 Comments
spamming automatically block