how to put link in css button and still i want to see my transition effects of button before to proceed next page?

how to add link in this css button without damaging the transition effects? heres sample i got in google Visit http://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate2

Answers 1

  • Try this using setTimeout():

    $(function() {
      $('a').click(function(e) {
        e.preventDefault();
        setTimeout(function() {
          window.location = $(this).attr('href')
        }, 200);
      });
    });
    .button {
      position: relative;
      background-color: #4CAF50;
      border: none;
      font-size: 28px;
      color: #FFFFFF;
      padding: 20px;
      width: 200px;
      text-align: center;
      -webkit-transition-duration: 0.4s;
      /* Safari */
      transition-duration: 0.4s;
      text-decoration: none;
      overflow: hidden;
      cursor: pointer;
    }
    .button:after {
      content: "";
      background: #90EE90;
      display: block;
      position: absolute;
      padding-top: 300%;
      padding-left: 350%;
      margin-left: -20px!important;
      margin-top: -120%;
      opacity: 0;
      transition: all 0.8s
    }
    .button:active:after {
      padding: 0;
      margin: 0;
      opacity: 1;
      transition: 0s
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a href="http://google.ro">
      <button class="button">Click Me</button>
    </a>


Related Articles