Create On Click Button Using JQuery


Its features:

  • Clicking on the button will show the animation.

  • To move the button to the right or left of the page, use "float: left" or "float: right"

    instead of "justify-content: center" and "align-items: center".

  • You can add a link to the name of button.

  • You can change the model color via CSS if you want.

Try to create like yourself by following the codes below :

Step 1) Add to head : <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700"> <link rel="stylesheet" href="31.css" />
Step 2) Add to html : <h2>Create On Click Button Using JQuery</h2> <section> <div class="one"> <button class="button"> Button </button> </div> </section>
Step 3) Add to css : section{ display:flex; justify-content:center; align-items:center; font-family:open sans,sens-serif; } .one{ width:230px; height:70px; background-image: linear-gradient(#f6692f, #df7c1b, #f6692f); border-radius:50px; } .button{ display:inline-block; width:220px; height:60px; margin-top:5px; margin-left:5px; background-image: linear-gradient(#df7c1b, #e2935d, #df7c1b); border:2px solid red; color:black; font-size:20px; font-weight:bold; text-transform:uppercase; text-align:center; text-decoration:none; line-height:56px; box-sizing:border-box; border-radius:50px; background-color:transparent; outline:none; transition:all ease 0.5s; } .active{ font-size:0; width:60px; height:60px; border-radius:50%; border-left-color:; animation:rotate 1.4s ease 0.5s infinite; } @keyframes rotate{ 0%{ transform:rotate(360deg); } } .success{ position:relative; background-color:black; animation:bounce .3s ease-in; } @keyframes bounce{ 0%{ transform:scale(0.9); } } .success:before{ content:''; position:absolute; background:url(011.png) no-repeat; left:0; right:0; margin:0 auto; width:60px; height:60px; line-height:60px; top:8px; }
Step 4) Add to jquery : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $(".button").click(function(){ $(this).addClass("active"); setTimeout(function(){ $(".button").addClass("success"); },3700); setTimeout(function(){ $(".button").removeClass("active"); $(".button").removeClass("success"); },5000); }); }); </script>

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.