BLOG 2024.01.29

CSSのみで、3Dボタンを作ってみましょう！

Written by XU

INDEX

はじめまして。

エヴォワークスのアシスタントエンジニア、ジョと申します。入社してから10ヶ月が経ちました。

中国出身で外国籍エンジニアとして働いています。

今回はCSSだけを使用して3Dボタンを作る方法を紹介します！

htmlの書き方

SNSアイコンを持つボタンを作りたいだけでなく、ホバー時にアイコンとテキストの色が一緒に変わる簡単な方法が欲しいので、今回はBootstrap Iconsライブラリを使用します！

Bootstrap Iconsをheadの閉じタグ直前に読み込む。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> 
</head>

Bootstrap Icons公式サイトでコピーしてペーストすればすぐに使える i タグを a タグに挿入する

instagram　＝＞ 

tiktok　＝＞ 

line　＝＞ 

<body> 
<ul> <!--instagram--> 
<li> 
<a href="#"> 
<!-- アイコンフォント Bootstrap Icons公式サイトでコピーしてペーストすればすぐに使えます。 --> 
<i class="bi bi-instagram"></i> 
<!-- アイコンフォント Bootstrap Icons公式サイトでコピーしてペーストすればすぐに使えます。END --> 
<span>instagram</span> 
</a> 
</li> 
<!--tiktok--> 
<li> 
<a href="#"> 
<i class="bi bi-tiktok"></i> 
<span>tiktok</span> 
</a> 
</li> 
<!--line--> 
<li> 
<a href="#"> 
<i class="bi bi-line"></i> 
<span>line</span> 
</a> 
</li> 
</ul> 
</body>

CSSの書き方

まず ul を中央に配置する

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

body { background-color: #ccc; font-family: sans-serif; } 

ul { 
display:flex; 
justify-content: center; 
align-items: center; 
width: 100%; 
height: 100vh; 
}

ボタンの見た目を調整する。

まずは2Dバージョンのボタンを制作します！

見た目が3Dに見えるように、aタグにtransformでボタンを傾斜させ、そしてbox-shadowでシャドウ効果をつけます。

ul li { 
list-style: none; 
margin: 0 10px; 
} 
ul li a i { 
font-size: 30px; 
color: #333; 
transition: .3s; 
line-height: 80px; 
padding-right: 15px; 
transition: .3s; 
} 
ul li a span { 
letter-spacing: 2px; 
color: #333; 
transition: .3s; 
margin-left: 10px; 
font-weight: bolder; 
} 
ul li a { 
text-decoration: none; 
display: block; 
width: 200px; 
height: 74px; 
background-color: #fff; 
padding-left: 20px; 
display: flex; 
justify-content: flex-start; 
align-items: center; 
transform: rotate(-30deg) skew(25deg); box-shadow: -25px 25px 25px rgba(0,0,0,.4); transition: .3s; 
}

https://codepen.io/evolab/pen/GReOpGa

３Dボタンが見えるためを調整する

擬似要素の::beforeと::afterを使って、3Dボタンの様子を表現します。

ul li a::before { 
content: ''; 
position: absolute; 
top: 10px; 
left: -20px; 
width: 20px; 
height: 100%; 
background-color: #888; 
transform: rotate(0deg) skewY(-45deg); 
transition: .3s; 
} 
ul li a::after { 
content: ''; 
position: absolute; 
bottom: -20px; 
left: -10px; 
width: 100%; 
height: 20px; 
background-color: #adadad; 
transform: rotate(0deg) skewX(-45deg); transition: .3s; 
}

hoverやactionに記述を追加して、３Dのような動きを実装する

hover時にtransformのtranslateの垂直方向の値をマイナスに設定すると、ボタンが上に浮かび上がります。

押下時にtransform: translate(0px, 0px)に戻すことで、ボタンを押したときに3D効果が見られます！

ul li:hover a { 
transform: rotate(-30deg) skew(25deg) translate(10px, -10px); 
background-color: #46E678; 
box-shadow: -55px 55px 55px rgba(0,0,0,.4); 
color: #fff; 
} 
ul li:hover a i { color: #fff; } 
ul li:hover a span { color: #fff; } 
ul li:hover a::before { background-color: #57AF72; } 
ul li:hover a::after { background-color: #ABEFC0; } 

ul li:active a { 
transform: rotate(-30deg) skew(25deg) translate(0px, 0px); 
box-shadow: -15px 15px 15px rgba(0,0,0,.3); 
background-color: #fff; 
} 

ul li:active a i { color: #000; } 
ul li:active a span { color: #000; } 
ul li:active a::before { background-color: #888; } 
ul li:active a::after { background-color: #adadad; }