Create Border Button Using HTML And CSS


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".

  • 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">
Step 2) Add to html : <h2>Create Border Button Using HTML And CSS</h2> <section> <a href="#abcd"><span></span>LINK TEXT</a> </section>
Step 3) Add to css : section{ display:flex; justify-content:center; align-items:center; font-family:open sans,sens-serif; width:230px; height:70px; background-image: linear-gradient(#1a1d22, #656361, #1a1d22); border:5px solid #e8960f; border-radius:50px; } section a{ position:relative; text-transform:uppercase; text-decoration:none; text-align:center; color:#f1a102; font-size:20px; font-family:arial; font-weight:bold; letter-spacing:4px; padding:10px; } section a:hover{ color:red; } section a::before, section a::after, span::before, span::after{ content:""; position:absolute; width:8px; height:8px; background:transparent; transition:1s; } section a::before{ top:-4px; left:-4px; border-top:5px dotted yellow; border-left:5px dotted yellow; } section a::after{ top:-4px; right:-4px; border-top:5px dotted yellow; border-right:5px dotted yellow; } span::before{ bottom:-4px; left:-4px; border-bottom:5px dotted yellow; border-left:5px dotted yellow; } span::after{ bottom:-4px; right:-4px; border-bottom:5px dotted yellow; border-right:5px dotted yellow; } section a:hover::before, section a:hover::after, section a:hover span::before, section a:hover span::after{ width:calc(265px/2); height:calc(38px/2); }

Thank you sir

Congratulations to you on visiting our page.

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