Button glow code in html and css
 |
| Code output |
<html>
<head>
<style>
body {
height:100vh;
width:100vw;
background-color:rgb(19, 20, 22);
overflow:hidden;
font-family: Lato, "Trebuchet MS", "Verdana", "sans-serif";
}
#bestmovieszon{
width: 150px;
height:50px;
border-radius:180px;
position:relative;
left:calc(50% - 75px);
top:calc(50% - 25px);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
cursor:pointer;
line-height:12px;
}
#bestmovieszon:before {
content:'';
z-index:1;
position:absolute;
display:block;
width:80%;
height:70%;
top:15%;
left:10%;
transition: 0.3s opacity ease-in-out;
filter:blur(15px);
opacity:0;
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
}
#bestmovieszon:hover:before {
opacity:1;
transition: 0.3s opacity ease-in-out;
filter:blur(25px);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
}
#bestmovieszon:after {
content:'CLICK ME!';
text-align:center;
line-height:40px;
font-size:18px;
color:rgba(235,235,235,1);
font-weight:bold;
z-index:5;
position:absolute;
display:block;
border-radius:180px;
width:92%;
height:80%;
top:10%;
left:4%;
background-color:rgb(19, 20, 22);
}
</Style>
<Body>
<a href="https://bestmovieszon.blogspot.com"><div id="bestmovieszon"></div></a>
</Body>
</Html>
W3 School website link:👉 click here.. 👈
YouTube channel link 👉:- click here..👈
0 Comments