Glowing Button

August 26, 2022

Glowing Button

This design was actually made by Kevin Powell, on his Youtube channel.
I just tried make a few changes in it.
Link to the video : Click here
Link to the channel : Click here

CODE

<html>
<body>
          <div class="main">
                    <button id="b1">Let's glow</button><br><br>
                    <button id="shadow"></button>
          </div>
          
<style>
          body{
                    height: 90%;
                    display: grid;
                    justify-content: center;
                    align-content: center;
                    background-color: #011e26;
          }
          #b1{
                    border: 2px solid white;
                    border-color: #00c8ff;
                    background-color: #011e26;
                    height: 1.5cm;
                    width: 4.5cm;
                    font-size: 1.3em;
                    color: #00c8ff;
                    
          }
         #shadow{
                    background-color: #00c8ff;
                    height: 1.5cm;
                    width: 4.5cm;
                    transform: perspective(3em) rotateX(40deg) scale(0.7, 0.3);
                    filter: blur(4em);
         }
          
          #after{
                    color: transparent;
                    text-shadow: 0px 0px 10px #00c8ff, 0px 7px 15px #00c8ff, 0px 7px 20px #00c8ff;                    
          }
          
          #b1:hover{
                    background-color : #00c8ff;
                    box-shadow: 0px 0px 30px #00c8ff;
                    color: #011e26;
                    font-size: 20px
          }
          #b1:hover ~ #shadow{
          transform: perspective(3em) rotateX(40deg) scale(1, 0.45);
                     filter: blur(3em);        
          }
          #b1:active{
                    background-color : #00c8ff;
                    opacity: 0.7;
          }
          #b1:active ~ #shadow {
                    transform: perspective(3em) rotateX(40deg) scale(0.7, 0.3);
                    filter: blur(4em);
          }
         
</style>          
</body>
</html>

Search This Blog

Coderati

Glowing Button

Comments

Post a Comment

Popular Posts

Password generator