Button hover effect with sliding box source code

 <!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <meta name="" content="">

    <title></title>

    <style>

      *{

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        color: white;

      }

      body{

        background: black;

        min-height: 100vh;

        min-width: 100vw;

        display: flex;

        justify-content: center;

        align-items: center;

      }

      

      .hover{

        height: 4rem;

        border-radius: 5px;

        width: 10rem;

        font-size: 2rem;

        border: none;

        color: black;

        position: relative;

        transition: transform .7s ease-in;

      }

     .hover:before{

       content: '';

       position: absolute;

       height: 6%;

       width: 6%;

       background: black;

       top: -3px;

       right: 10px;

       border: 2px solid white;

       transform: width;

       transition: transform .7s ease-in;

     }

     .hover:after{

       

       content: '';

       position: absolute;

       height: 6%;

       width: 6%;

       background: black;

       bottom: -3px;

       left: 10px;

       border: 2px solid white;

       transition: transform .7s ease-in;

     }

      

      .hover:hover:after{

        transform: translateX(125px);

       border: 2px solid green;

      }

      .hover:hover{

        background: green;

        box-shadow: 0 0 63px 19px green;

      }

      .hover:hover:before{

       border: 2px solid green;

        transform:translateX(-125px);

      }

      

    </style>

  </head>

  <body>

    <div class="main">

      <button type="submit" class="hover">Subscribe</button>

    </div>

  </body>

</html>

Comments