HTMLとCSSだけで作るSNSボタンの参考デザイン【webデザイン】

2023年1月13日

今回はコピペでできるHTMLとCSSで作るSNSへのリンクボタンを作成しました。オシャレなホバーデザインですので、気に入った方は使ってみてください！

HTMLとCSSで作るSNSボタンの参考デザイン【webデザイン】

今回は例としてfacebook、twitter、instagram、Youtubeの4つのSNSボタンを作ります。フッターやヘッダーに実装すると良いかもしれません。

DEMOページ

最初に全てのコードをお見せして、後から細かく説明しますので、コードだけ知りたい方はコピーしてすぐに使ってみてください！

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLとCSSだけで作るSNSボタンの参考デザイン【webデザイン】</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
    <div class="social-buttons">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>
    </div>
</body>
</html>

CSS↓

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-buttons a{
    display: inline-flex;
    text-decoration: none;
    font-size: 18px;
    width: 60px;
    height: 60px;
    color: #fff;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 8px;
}
.social-buttons a::before{
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg,#D46367,#FBB299);
    border-radius: 50%;
    z-index: -1;
    transition: .3s ease-in;
}
.social-buttons a:hover::before{
    transform: scale(0);
}
.social-buttons a:hover i{
    background: linear-gradient(45deg,#D46367,#FBB299);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: scale(2.2);
    transition: .3s ease-in;
}

CSSの解説

その1　Fontawesomeのアイコンを使う

いつものようにフォントオウサムのページに行きCSSのリンクを取得します。今回使ったCSSはココの

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css

です。これをコピーしてタイトルタグの下にlinkタグで紐付けます。

その2　動き方の流れ

タグの前に新しい要素(contet;””;)を::beforeで作っていて、その新しい要素をタグの真裏に<a>タグと同じ形と大きさで背景として設置しています。その背景にホバー（オンマウス）した時に、新しい要素とアイコン（タグ）が動き出すという流れになっています。

その3　::beforeの意味

.social-buttons a::before{
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg,#D46367,#FBB299);
    border-radius: 50%;
    z-index: -1;
    transition: .3s ease-in;
}

ここに出てくる::beforeは擬似要素と呼ばれる物で、指定した要素に新しい子要素を作成します。よくcontentプロパティを指定してテキストや引用符などを追加するのに使われます。検証画面をみるとわかると思いますが、形としては<a><::before></a>のようなイメージです。今回の場合は幅と高さが60pxのグラデーションのかかった円形を作成しておりposition:absolute;とz-index:-1;で<a>タグと同じ位置に指定し、タグの真裏に指定して配置しています。

その4　グラデーションを作る

ボックスにグラデーションを描きたい時はbackgraundプロパティのlinear-gradient()を使います。カッコの中には(角度,最初の色,最後の色)の順番で指定できます。

その5　ホバー時の動き

マウスが<a>タグにホバーした時、2つの要素が動き出します。

::beforeで作成した要素

.social-buttons a:hover::before{
    transform: scale(0);
}

これは大きさが小さくなっていき、最後には消えるように動きます。ここで注意したいのが、ホバー指定の書き方です。::beforeのホバー時は::before:hoverで機能しません。正しくは:hover::beforeなので、正確に覚えましょう。

タグ（アイコン）

.social-buttons a:hover i{
    background: linear-gradient(45deg,#D46367,#FBB299);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: scale(2.2);
    transition: .3s ease-in;
}

まず::before要素と同じグラデーションの背景を敷きます。それを-webkit-background-clip: text;でアイコンの形に切り抜きます。次に-webkit-text-fill-color: transparent;で元々白色に指定してあったアイコンの色を透明にすることで、グラデーションかかったアイコンが表現できます。それを0.3秒間で2.2倍の大きさに拡大します。

まとめ

いかがだったでしょうか？言葉で説明するのはなかなか難しいですね、、。一番は自分であれこれ試してみることだと思います。beforeをafterに変えてみたりtransitionの時間を変えてみたりして何がどこに作用しているか研究してみてください！コーディングの知識を増やして、デザインの幅を広げましょう！それでは皆さんの良きコーディングライフを！