Follow Us On Telegram Telegram link
HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodeAtNow | A Pen by Trent Walton</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <a class="btn btn--wide spacing-top-sm" href="#">Glowing Button <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.7071 8.70711C17.0976 8.31658 17.0976 7.68342 16.7071 7.29289L10.3431 0.928932C9.95262 0.538408 9.31946 0.538408 8.92893 0.928932C8.53841 1.31946 8.53841 1.95262 8.92893 2.34315L14.5858 8L8.92893 13.6569C8.53841 14.0474 8.53841 14.6805 8.92893 15.0711C9.31946 15.4616 9.95262 15.4616 10.3431 15.0711L16.7071 8.70711ZM0 9H16V7H0V9Z" fill="white"></path></svg></a> <!-- partial --> </body> </html>
CSS
body{
background: #11131e;
font-family: sans-serif;
font-size: 21px;
display: flex;
height: 100vh;
}
.btn {
background-size: 50%,100%;
}
.btn::after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10em;
-webkit-transition: -webkit-box-shadow .4s ease-in-out;
transition: -webkit-box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out,-webkit-box-shadow .4s ease-in-out;
}
.btn {
position: relative;
margin: auto;
background: -webkit-gradient(linear,left top,right top,from(#700f46),color-stop(#d61361),color-stop(#f41445),color-stop(#fc1e39),color-stop(#ff4f28),to(#ffb11e));
background: linear-gradient(90deg,#700f46,#d61361,#f41445,#fc1e39,#ff4f28,#ffb11e);
background: url(/img/white-noise.png),linear-gradient(87.58deg,#700f46 .61%,#d61361 27.89%,#f41445 51.19%,#fc1e39 81.31%,#ff4f28 90.97%,#ffb11e 109.72%);
background-size: auto, auto;
background-size: 35%,100%;
background-blend-mode: overlay,normal;
border-radius: 10em;
text-decoration: none;
padding: .85rem 2rem;
font-weight: 500;
display: inline-block;
-webkit-transition: background-size .4s ease-in-out;
transition: background-size .4s ease-in-out;
}
a{
color: white;
}
.btn svg {
display: inline;
width: .8rem;
vertical-align: middle;
margin-left: .3rem;
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out,-webkit-transform .15s ease-out;
position: relative;
top: -1px;
}
.btn:hover:not([disabled]) svg {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
.btn:hover::after {
-webkit-box-shadow: 0 0 24px #ff0068;
box-shadow: 0 0 24px #ff0068;
}
JS
No JavaScript
