Create Share Button Using HTML And CSS





Its features:

  • Touching 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 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 head : <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ font-awesome/4.7.0/css/font-awesome.min.css">
Step 2) Add to html : <h2>Create Share Button Using HTML And CSS</h2> <div class="fifteen"> <div class="share-button"> <span>Share Me</span> <a href="#abcd" ><i class="fa fa-facebook"></i></a> <a href="#abcd" ><i class="fa fa-twitter"></i></a> <a href="#abcd" ><i class="fa fa-instagram"></i></a> <a href="#abcd" ><i class="fa fa-pinterest"></i></a> </div> </div>
Step 2) Add to css : .fifteen{ margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .share-button { widith: 245px; height: 78px; background-image: url("d.png"); background-repeat: no-repeat; border-radius: 40px; display: flex; align-items: center; justify-content: center; padding: 0 50px; overflow: hidden; position: relative; cursor: pointer; transition: .3s linear; } .share-button:hover{ transform: scale(1.1); } .share-button span{ position: absolute; width: 100%; height: 100%; background-image: linear-gradient(#858802,#e9e624,#858802); border:1px solid #e9e624; border-radius: 40px; color: black; text-align: center; line-height: 72px; font-size:22px; z-index: 999; transition: .6s linear; border-radius: 40px; } .share-button:hover span{ transform: translateX(-100%); transition-delay: .3s; } .share-button a { flex: 1; font-size: 26px; margin-right: 20px; color: #2d3436; text-align: center; transform: translateX(-100%); opacity: 0; transition: .3s linear; } .share-button:hover a { opacity: 1; transform: translateX(0); }

Thank you sir

Congratulations to you on visiting our page.

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