Create Overlay Button With HTML And CSS





Its features:

  • Touching on the button will show the animation.

  • The wider the width of the container from the style sheet, the more the button will move to the right.

  • You can add a link to the name of the 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 html : <h2>Create Overlay Button With HTML And CSS</h2> <div class="container"> <button type="button" class="button"> <a href="#abcd"><span>BUTTON</span></a> </button> </div>
Step 2) Add to css : .container { position: absolute; width:60%; } .button { border: 3px dotted red; border-radius:10px; display: block; text-align: center; cursor: pointer; text-transform: uppercase; outline: none; overflow: hidden; position: relative; color: #eeeeee; font-weight: 600; font-size: 15px; background-image: linear-gradient(#f75431, #f68622, #f75431); padding: 15px 50px; margin: 0 auto; } .button a{ text-decoration:none; color:white; } .button span { position: relative; z-index: 1; } .button:after { content: ""; position: absolute; left: 0; top: 0; height: 470%; width: 140%; background-image: linear-gradient(#670da8, #2b75be, #670da8); -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg); transform: translateX(-100%) translateY(-25%) rotate(45deg); } .button:hover:after { -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); transform: translateX(-9%) translateY(-25%) rotate(45deg); }

Thank you sir

Congratulations to you on visiting our page.

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