ホバー時ツイッターバードが現れる！XのSNSシェアボタン6選

@ハクト 2023-08-18 18:02:56に投稿

ツイッターのソーシャルボタンが「X」に変わり、SNSのシェアボタンを置き換えなければなりませんね。

ただツイッターの「青い鳥」が名残惜しい方もいるのではないでしょうか？

そんな方のためにホバー時だけツイッターバードが少し顔を出すSNSシェアボタンを作りました。

以下、なにか活用できそうなアイデアがあれば参考にしてみてください〜。

アイコンが回転してツイッターバードが現れる

「transform: rotateY」でアイコンをフリップさせてます

コードを表示

<a href="#" class="btn-sns">
<div class="svg-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
    </svg>
</div>
<div class="svg-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
    </svg>
</div>
</a>

.btn-sns {
position: relative;
width: 40px;
height: 40px;
perspective: 1000px;
background-color: #000;
border-radius: 50%;
padding: 1rem;
}

.svg-icon {
position: absolute;
inset: 0;
margin: auto;
width: 32px;
height: 32px;
transform-origin: center;
transform-style: preserve-3d;
transition: transform .5s;
backface-visibility: hidden;
}

.svg-icon svg {
fill: #fff;
}

/* 初期状態での背面のSVGをフリップさせて非表示に */
.btn-sns .svg-icon:last-child {
transform: rotateY(180deg);
}

/* ホバー時のアクションを設定 */
.btn-sns:hover .svg-icon:first-child {
transform: rotateY(180deg);
}

.btn-sns:hover .svg-icon:last-child {
transform: rotateY(0deg);
}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

ホバー時に鳥が飛んでいく

「translate」関数で鳥を動かし、「rotate3d」でXアイコンを回転させてます。

コードを表示

<a href="#" class="btn-sns">
<div class="svg-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
    </svg>
</div>
<div class="svg-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
    </svg>
</div>
</a>

.btn-sns {
position: relative;
width: 40px;
height: 40px;
perspective: 1000px;
background-color: #000;
border-radius: 50%;
padding: 1rem;
overflow: hidden;
}

.svg-icon {
position: absolute;
inset: 0;
margin: auto;
width: 32px;
height: 32px;
transform-origin: center;
transform-style: preserve-3d;
transition: all 1s;
}

.svg-icon svg {
fill: #fff;
}

.btn-sns .svg-icon:last-child {
transform: translate(-250%, 250%);
width: 16px;
height: 16px;
}

.btn-sns:hover .svg-icon:first-child {
animation: rotateAnime 0.3s 2 0.1s linear;
}

.btn-sns:hover .svg-icon:last-child {
animation: flyAnime 0.5s;
}

@keyframes rotateAnime {
to {
    transform: rotate3d(45, 45, 0, 360deg);
}

}

@keyframes flyAnime {
to {
    transform: translate(250%, -250%);
}

}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

ツイッターバードとXが融合する

「opacity」でツイッターアイコンを徐々に表示しています

コードを表示

<a href="#" class="btn-sns">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>

.btn-sns {
position: relative;
width: 40px;
height: 40px;
background-color: #000;
border-radius: 50%;
padding: 1rem;
}

.btn-sns svg {
position: absolute;
inset: 0;
margin: auto;
width: 32px;
height: 32px;
transition: all 1s;
}

.btn-sns svg {
fill: #fff;
}

.btn-sns svg:last-child {
transform: rotateY(180deg);
opacity: 0;
}

.btn-sns:hover svg:last-child {
opacity: 1;
}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

中央から分割して青い鳥が現れる

Xアイコンを２つ配置し「clip-path」で切断。ホバー時に「translateX」「rotateY」で扉を開いたようなアニメーションを入れてます。

コードを表示

<a href="#" class="btn-sns">
<div class="svg-icon svg-left">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
    </svg>
</div>
<div class="svg-icon svg-right">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
    </svg>
</div>
<div class="svg-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
    </svg>
</div>
</a>

.btn-sns {
position: relative;
width: 40px;
height: 40px;
padding: 1rem;
}

.svg-icon {
display: grid;
place-content: center;
position: absolute;
inset: 0;
margin: auto;
transition: transform 0.5s ease;
backface-visibility: hidden;
}

.svg-icon svg {
width: 32px;
height: 32px;
}

.svg-left {
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
background-color: #000;
border-radius: 50%;
}

.svg-right {
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
background-color: #000;
border-radius: 50%;
}

.svg-icon svg {
fill: #fff;
}

.svg-icon:last-child svg {
transform: scale(0);
transition: transform 1s;
}

/* ホバー時のアクションを設定 */
.btn-sns:hover .svg-left {
transform: translateX(-20%) rotateY(-90deg);
}

.btn-sns:hover .svg-right {
transform: translateX(20%) rotateY(90deg);
}

.btn-sns:hover .svg-icon:last-child svg {
transform: scale(1.2);
fill: #1da1f1;
}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

Xアイコンが縮小しツイッターバードが現れる

「scale」関数を使用しアイコンを拡大縮小しています。

コードを表示

<a href="#" class="btn-sns">
<div class="svg-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
    </svg>
</div>
<div class="svg-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
    </svg>
</div>
</a>

.btn-sns {
position: relative;
width: 40px;
height: 40px;
padding: 1rem;
}

.svg-icon {
display: grid;
place-content: center;
position: absolute;
border-radius: 50%;
inset: 0;
margin: auto;
transition: all .5s;
}

.svg-icon svg {
fill: #fff;
width: 32px;
height: 32px;
}

.svg-icon:first-child {
background-color: #000;
}

.svg-icon:last-child {
transform: scale(0);
}

.svg-icon:last-child svg {
fill: #000;
}

/* ホバー時のアクションを設定 */
.btn-sns:hover .svg-icon:first-child {
transform: scale(0);
}

.btn-sns:hover .svg-icon:last-child {
transform: scale(1.5);
}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

ホバー時にツイッターバードが拡大する

ホバー時に「scale」関数を使用しツイッターアイコンを拡大させています。

コードを表示

<a href="#" class="btn-sns">
<div class="svg-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
    </svg>
</div>
<div class="svg-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
    </svg>
</div>
</a>

.btn-sns {
position: relative;
width: 40px;
height: 40px;
padding: 1rem;
background-color: #000;
border: 1px solid #000;
border-radius: 50%;
transition: all .7s;
overflow: hidden;
}

.svg-icon {
position: absolute;
inset: 0;
margin: auto;
width: 32px;
height: 32px;
transition: transform .7s;
backface-visibility: hidden;
}

.svg-icon svg {
fill: #fff;
}

.btn-sns .svg-icon:last-child {
transform: scale(.1);
}

/* ホバー時のアクションを設定 */
.btn-sns:hover .svg-icon:first-child {
transform: rotateX(360deg);
z-index: 2;
}

.btn-sns:hover .svg-icon:first-child svg {
fill: #000;
}

.btn-sns:hover .svg-icon:last-child {
transform: scale(8);
z-index: 1;
}

このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

動画編集入門プラン（2ヶ月）用LP

在宅ワークで稼げるスキルを身につけるテックアカデミーWeb制作講座

css snsシェアボタン x ツイッター

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter

ホバー時ツイッターバードが現れる！XのSNSシェアボタン6選

目次

アイコンが回転してツイッターバードが現れる

ホバー時に鳥が飛んでいく

ツイッターバードとXが融合する

中央から分割して青い鳥が現れる

Xアイコンが縮小しツイッターバードが現れる

ホバー時にツイッターバードが拡大する