Up to 70% off on hosting for WordPress Websites $2.95 /mo

Csshint recommends hosting

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.

Pure CSS button animation bigger on hover


<div class="centered">
  <a href="#" class="lgbtn green">csshint.com</a>
@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;
              padding: 20px 60px;
              transform: scale(1.1);

               text-decoration: none !important;