Pure CSS button animation bigger on hover

In this article we are going to learn How to create button animation bigger on hover using css. Designed by ASK Snb.

HTML

<div class="centered">
  <a href="#" class="lgbtn green">csshint.com</a>
</div>

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

            body {
                background-color: #eee
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                user-select: none;
                text-transform: uppercase;
                font-family: 'Poppins', sans-serif
            }

            .centered {
                position: absolute;
                top: 40%;
                left: 40%
            }

            .lgbtn {
              border-radius: 5px;
              padding: 15px 55px;
              font-size: 18px;
              text-decoration: none;
              margin: 20px;
              background-color: green;
              color: #fff;
              position: relative;
              display: inline-block;
            }
            .lgbtn:active {
              transform: translate(0px, 5px);
              -webkit-transform: translate(0px, 5px);
              box-shadow: 0px 1px 0px 0px;
            }
            .green {
              background-color: green;
              box-shadow: 3px 5px 5px #888888;
              border-radius: 2px;
              transition: all .5s ease-in-out;
            }
            .green:hover {
              background-color: #000;
              color:#fff;
              padding: 20px 60px;
              transform: scale(1.1);
            }

            a{
               text-decoration: none !important;
            }