Skip to main content

Social Media Share Button With Hover Effect Using Html Css Only

by Rustcode
social-media-share-button-with-hover-effect-using-html-css-only

Social Media Share Button With Hover Effect Using Html Css Only

In this article, we will be create social media share buttons that spring to life upon hovering. With just HTML and CSS, you can infuse your website or blog with interactivity and charm. These buttons will prompt your visitors to share your content across various social platforms, extending your reach to a broader audience. So, let's delve into the process and infuse some vibrancy into your website's sharing experience!

The concept behind designing these social share buttons is quite straightforward: initially, you will encounter the word "share". However, when you hover your mouse over it, a host of social media icons will emerge, accompanied by a gracefully moving line from left to right. Let's embark on creating this captivating animation!

 

Table Of Contents

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
  <head>
    <title>Social Media Share Button With Hover Effect Using Html Css Only</title>
  </head>
  <body>
    // Content
  </body>
</html>

 

You can incorporate all the required links and dependencies into the HTML document using the code snippet provided below. 

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

 

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below. 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  <title>Social Media Share Buttons With hover Effect </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <button>
    
    <div class="letters">
       <div class="card">
          <div class="card-face front">S</div>
          <div class="card-face back">
             <i class="fab fa-instagram-square"></i>
          </div>
       </div>
    </div>

    <div class="letters">
       <div class="card">
          <div class="card-face front">H</div>
          <div class="card-face back">
             <i class="fab fa-twitter-square"></i>
          </div>
       </div>
    </div>

    <div class="letters">
       <div class="card">
          <div class="card-face front">A</div>
          <div class="card-face back">
             <i class="fab fa-github-square"></i>
          </div>
       </div>
    </div>

    <div class="letters">
       <div class="card">
          <div class="card-face front">R</div>
          <div class="card-face back">
             <i class="fab fa-linkedin"></i>
          </div>
       </div>
    </div>

    <div class="letters">
       <div class="card">
          <div class="card-face front">E</div>
          <div class="card-face back">
             <i class="fab fa-facebook-square"></i>
          </div>
       </div>
    </div>
  </button>
  
<script src="script.js"></script>
</body>
</html>

  • The code includes the Font Awesome library (<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>) to use social media icons.

  • It sets the page's title to "Social Media Share Buttons With Hover Effect".

  • The CSS stylesheet is linked using <link rel="stylesheet" href="style.css">.

  • Inside the <body> tag, there's a <button> element that contains several <div> elements with class "letters". Each "letters" div represents a letter (S, H, A, R, E) and has a flip-card effect implemented using CSS. When hovered over, these letters reveal a social media icon (Instagram, Twitter, GitHub, LinkedIn, Facebook) using Font Awesome icons.

  • The JavaScript file <script src="script.js"></script> is included at the end of the document, suggesting that there might be additional functionality or interactivity added to these buttons using JavaScript, which is located in the script.js file.

Output:

output-without-css

Read Also:

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;        
  display: flex;
  justify-content: center;
  align-items: center;    
  background: #E9E9E9;
}   

button {
  width: 270px;
  height: 80px;
  padding: 10px;
  border: none;
  background: white;      
  display: flex;
  justify-content: center;
  align-items: center;    
  position: relative;
  border-radius: 0px;
  cursor: pointer;
}

button::after {
  content: "";
  position: absolute;
  width: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #307875;
  transition: width 1s ease-in-out;
}

button:hover:after {
  width: 100%;
}

.letters {
  width: 50px;
  height: 50px;
  perspective: 600px;
  font-family: "Monument", sens-serif;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s ease-in-out;
  transform-style: preserve-3d;
}

.card-face {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 26px;
  color: #307875;
}

.back {
  transform: rotateY(180deg);
}

button:hover .card {
  transform: rotateY(180deg);
}

  • *:

    • Resets default margin, padding, and box-sizing for all elements on the page to ensure consistent styling.

  • body:

    • Sets the height of the entire body to 100% of the viewport height (100vh).
    • Uses flexbox to center its child elements both horizontally (justify-content: center) and vertically (align-items: center).
    • Applies a light gray background color to the body.

  • button:

    • Styles a button element with specific dimensions, padding, border, and background.
    • Uses flexbox to center the button's content both horizontally and vertically.
    • Adds a bottom border that starts as a thin line and expands to full width when hovered (button::after pseudo-element).
    • Changes the cursor to a pointer on hover for better user interaction.

  • button::after:

    • Creates a pseudo-element that serves as the expanding bottom border of the button.
    • Initially has a width of 0 (invisible) and expands to 100% of the button width on hover.

  • .letters Class:

    • Styles an element with a fixed width and height, enabling a 3D effect using CSS transforms.

  • .card Class:

    • Styles an element that simulates a card flip effect with a 3D transformation when hovered.
    • Uses CSS transitions to make the flip smooth and visually appealing.
    • Uses the backface-visibility property to hide the back side of the card.

  • .card-face Class:

    • Styles the front and back faces of the card with text, color, and font settings.

  • .back Class:

    • Applies a 3D rotation to the card to reveal the back face when hovered.

  • button:hover .card:

    • Activates the card flip effect when hovering over the button element.

Read Also:

Output:

social-button-output

Read Also:

Youtube Video:

We also made a youtube video for "Social Media Share Button With Hover Effect Using Html Css Only", if you want to watch demo you can click on below video.

Read Also:


Comments

Post a Comment