Social Media Buttons with Hover Effect Using Html Css

Social Media Icons with an added hover effect that is implemented using html and css. The hover effect could be a change in color, size or any other visual enhancement that occurs when a user's cursor is placed over the social media icon. Here we will create a hover effect that converts the social media icons' background into a circle shape from a square shape with a rotation effect.

The webpage or design uses html to structure the layout of the social media buttons and css to apply the hover effect and other styling to the buttons to make them visually appealing and interactive. It allows the user to easily navigate to the social media pages by clicking on the icons. It can also improve the overall look and feel of the website. For more gsap animations you can follow the gsap playlist.

You can gain further knowledge about web development by exploring the resources in this playlist.

01. HTML
02. CSS
03. Output
04. Youtube Video
05. Source Code

Read Also:

HTML:

Let's start with the boilerplate of html document which you can see below.

<!DOCTYPE html>
<html>
<head>
 <title>Social Media Buttons with Hover Effect Using Html Css | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

Body Content 

</body>
</html>

The basic HTML structure and necessary dependencies have been included in the document. It is now time to proceed with the implementation of the HTML code, as outlined below.

<!DOCTYPE html>
<html>
<head>
  <title>Social Media With Cool Hover Animation | Rustcode</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>

 <body>
 
  <ul class="container">
   <li><a href="#"><span class="fab fa-codepen"></span></a></li>
   <li><a href="#"><span class="fab fa-github"></span></a></li>
   <li><a href="#"><span class="fab fa-twitter"></span></a></li>
   <li><a href="#"><span class="fab fa-instagram"></span></a></li>
  </ul>
  
 </body>
</html>

This code creates a webpage that displays social media icons using Font Awesome, where the icons have a hover effect applied to them using HTML and CSS. The webpage imports the Font Awesome CSS file from the cloudflare CDN and a CSS file named "style.css" which contains the styling for the webpage. The icons do not have links as the href is set to "#" which means it will not take the user to any other page.

This is an html code for a webpage that create the social media icons interface using Font Awesome.

The first line <!DOCTYPE html> declares the document type of the web page. It is an instruction to the web browser about what version of HTML the page is written in.

The <html> tag is the container for all other html elements. It tells the browser that this is an html document.

The <head> tag contains information about the document, such as the title which appears in the browser tab and meta data.

The <title> tag specifies the title of the document, which is displayed in the browser's title bar or tab. The title of this page is "Social Media With Cool Hover Animation Using Html Css".

The <link> tag is used to link to external resources, such as CSS stylesheets. It has two links in this code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

This link is used to import Font Awesome CSS file from the cloudflare CDN. It is used to display the icons.

<link rel="stylesheet" type="text/css" href="style.css">

This link is used to import a CSS file named "style.css" which contains the styling for the webpage.

The <body> tag contains the visible content of the web page. The <ul> tag defines an unordered list and the class "container" is added to it. The <li> tag defines a list item and it contains <a> tag which is used to create hyperlinks.

The <span> tag is used to group inline-elements in a document. The class "fab fa-codepen" is added to the <span> tag. This is used to reference the Font Awesome styles for the codepen icon. It is the same for the other icons like Github, Twitter and Instagram. The href attribute of the <a> tag is set to "#" which means it will not take the user to any other page.

Output:

Read Also:

CSS:

* {
   margin: 0;
   padding: 0;
}

body {
   height: 100vh;
   width: 100vw;
   display: flex;
   align-items: center;
   justify-content: center;
}

.container {
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: center;
}

.container li {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 70px;
   width: 70px;
   margin: 0 10px;
   cursor: pointer;
}

.container li:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: -1;
   border-radius: 6px;
   background: #111;
   transition: all 0.3s ease-in;
}

.container li:hover:before {
   transform: rotate(360deg);
   border-radius: 50%;
}

.container li a span {
   font-size: 27px;
   line-height: 70px;
   color: whitesmoke;
   transition: all 0.3s ease-out;
}

.container li:hover a span {
   transform: scale(1.1);
}

This code is css styles that are applied to the html elements of the webpage. First, the code sets the margin and padding of all elements on the webpage to 0px.

The body element is set to take up the full height and width of the viewport, and is set to display as a flex container with items aligned in the center both horizontally and vertically.

The class "container" is applied to a list element, and it is set to have no list-style, to display as a flex container with items aligned in the center both horizontally and vertically.

The class "container li" is applied to the list items and it sets the position of the elements as relative and makes them display as a flex container with items aligned in the center both horizontally and vertically. It also sets the height and width of the elements to 70px and sets a margin of 10px between them. It also sets the cursor property to "pointer" to indicate that the elements are clickable.

The class "container li:before" is applied to the pseudo-elements that are located before the list items. It sets the position of the elements as absolute, sets the top and left property to 0px, sets the height and width to 100%, sets the z-index to -1, sets the border-radius to 6px, background color to #111, and sets the transition effect to "all 0.3s ease-in".

The class "container li:hover:before" is applied when the mouse hovers over the list items, it sets the transform property to rotate the elements by 360deg, and sets the border-radius to 50%.

The class "container li a span" is applied to the span element that is located inside the anchor tag of the list items. It sets the font-size to 27px, line-height to 70px, color to whitesmoke and sets the transition effect to "all 0.3s ease-out".

The class "container li:hover a span" is applied when the mouse hovers over the list items, it sets the transform property to scale the elements by "1.1".

Output:

Read Also:

Output:

Read Also:

Youtube Video:

A video tutorial for "Social Media Buttons with Hover Effect Using Html Css" is also available on YouTube. If you are interested in watching it and learning every step of this design, you can access it there.

Source Code:

Before downloading the source code, it is recommended that you first try writing the code yourself. Once you have done that, you can then compare it with the reference code.

Read Also:

Archive

Social Media Buttons with Hover Effect | Html And Css

Social Media Buttons with Hover Effect Using Html Css

Table Of Contents

HTML:

CSS:

Output:

Youtube Video:

Source Code:

Comments

Post a Comment