Animated Social Share Buttons with HTML & CSS | Glassmorphism | Neon Light Hover Effects

02/28/2022

Contents

Demo

Full Screen

Code

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Animated Social Share Buttons</title>
    <link rel="stylesheet" type="text/css" href="https://demo.plantpot.works/assets/css/normalize.css">
    <link rel="stylesheet" href="https://use.typekit.net/opg3wle.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="container">
      <div class="box">
        <input type="checkbox" id="share">
        <label for="share" class="btns">
          <a class="btn btn-twitter" href="#"><img src="twitter_icon.svg"></a>
          <a class="btn btn-facebook" href="#"><img src="facebook_icon.svg"></a>
          <a class="btn btn-pinterest" href="#"><img src="pinterest_icon.svg"></a>
          <a class="btn btn-instagram" href="#"><img src="instagram_icon.svg"></a>
          <span class="btn btn-share"><img src="share_icon.svg"></span>
        </label>
      </div>
    </div>
  </body>
</html>

CSS

@charset "utf-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
}
body {
  background-color: #000;
  font-family: futura-pt, sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100vh;
}
.box {
  position: relative;
  width: 200px;
  height: 200px;
}
input {
  display: none;
}
label {
  width: 200px;
  height: 200px;
}
img {
  width: auto;
  height: 25px;
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: .1s;
}
.btn-share {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.btn-twitter {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.btn-facebook {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.btn-pinterest {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.btn-instagram {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#share:checked ~ .btns .btn-twitter {
  opacity: 1;
  top: 0;
  left: 0;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
#share:checked ~ .btns .btn-facebook {
  opacity: 1;
  top: 0;
  right: 0;
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
}
#share:checked ~ .btns .btn-pinterest {
  opacity: 1;
  right: 0;
  bottom: 0;
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
#share:checked ~ .btns .btn-instagram {
  opacity: 1;
  bottom: 0;
  left: 0;
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}
.btn-share:hover {
  box-shadow: 0 0 20px rgba(255, 0, 128, 1);
  background-image: radial-gradient(rgba(255, 0, 128, 1), transparent);
}
.btn-twitter:hover {
  box-shadow: 0 0 20px rgba(29, 161, 242, 1);
  background-image: radial-gradient(rgba(29, 161, 242, 1), transparent);
}
.btn-facebook:hover {
  box-shadow: 0 0 20px rgba(24, 119, 242, 1);
  background-image: radial-gradient(rgba(24, 119, 242, 1), transparent);
}
.btn-pinterest:hover {
  box-shadow: 0 0 20px rgba(189, 8, 28, 1);
  background-image: radial-gradient(rgba(189, 8, 28, 1), transparent);
}
.btn-instagram:hover {
  box-shadow: 0 0 20px rgba(242, 105, 57, 1);
  background-image: radial-gradient(rgba(242, 105, 57, 1), transparent);
}