Awesome Share Button


Animasi tombol share ke sosial media menggunakan html dan css. Untuk icon sosial media, saya menggunakan Font Awesome

HTML

Pertama buat file dengan nama index.html dan masukkan kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Share Button</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="btn-wrap">
        <span>Share</span>
        <div class="container">
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-whatsapp"></i>
        </div>
    </div>
</body>
</html>

CSS

Kemudian kita buat file dengan nama style.css di folder yang sama dengan file index.html dan masukkan kode berikut :

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

i {
  opacity: 0;
  font-size: 20px;
  color: #1f1e1e;
  will-change: transform;
  transform: scale(0.1);
}

.btn-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    width: 240px;
    height: 72px;
    background-color: #EEEEED;
    border-radius: 80px;
    padding: 0 18px;
    will-change: transform;
    transition: all .2s ease-in-out;
}

.btn_wrap:hover {
    transform: scale(1.1);
}

span {
    position: absolute;
    z-index: 99;
    width: 240px;
    height: 72px;
    border-radius: 80px;
    font-family: sans-serif;
    font-size: 20px;
    text-align: center;
    line-height: 70px;
    letter-spacing: 2px;
    color: #EEEEED;
    background-color: #1F1E1E;
    padding: 0 18px;
    transition: all 1.2s ease;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 240px;
    height: 64px;
    border-radius: 80px;
}

.container i:nth-of-type(1) {
    transition-delay: 1.1s;
}
.container i:nth-of-type(2) {
    transition-delay: 0.9s;
}
.container i:nth-of-type(3) {
    transition-delay: 0.7s;
}
.container i:nth-of-type(4) {
    transition-delay: 0.4s;
}

.btn-wrap:hover span {
    transition-delay: 0.25s;
    transform: translateX(-280px);
}

.btn-wrap:hover i {
    opacity: 1;
    transform: scale(1);
}