How to create a Share Button with different Social Handles using HTML & CSS ?
In this article, we are going to create a share button which shows the social media accounts to share specific content over it when we click on the button.
- Create an HTML file in which we are going to add different types of social media icons.
- Create a CSS style to give some animation effects to the web-page elements.
- Create a JS file for adding event-listeners that can detect the mouse click event.
- First, create a HTML file(index.html).
- Then we link the CSS file that provides all the animation’s effect to our HTML. This is also placed in between the <head> tag.
- Coming to the body section of our HTML code.
- We have to add different social media icons.
- At the end of the body tag, we have to add 2 <script> tags one for our index.js file and the other for the icon that we have used on our web-page.
CSS Code: CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.
In CSS we have to remind the following points –
- Restore all the browser effects.
- Use classes and ids to give effects to HTML elements.
- Use of :hover to use hover effects
Steps to Run the Code:
1. Our project structure looks like this
2. Open index.html file to start the project
In this way, you can create your own share buttons by changing the social handles and the styling effects.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.