CSS入門 | CSS3拡張 | CSS3ボタン
CSS3ボタン(button)
CSSを利用すると、さまざまな形のボタンをいくつもの方法で作成できる。CSSでボタンは<button>タグだけでなく、<a>タグや<input>タグでも作成できる。
<button class="btn">buttonタグ</button>
<a href="#" class="btn">aタグ</a>
<input type="button" value="inputタグ" class="btn">
buttonタイプのinput要素で内部に表示される文字列は、value属性値で設定できる。
次の例は、マウスを乗せると背景色が変わるボタンの例である。
<style>
.btn {
background-color: #87CEEB;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover {
background-color: #4169E1;
color: white;
}
</style>
上の例のようにtransition-durationプロパティを使用すると、背景色だけでなく文字の色まで変更できる。
次の例は、影効果を設定したボタンの例である。
<style>
.btn {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.btn1, .btn2:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
</style>
上の例のようにbox-shadowプロパティを使用すると、ボタンに実物のような影効果を簡単に設定できる。
次の例は、ボタンを使用できないように設定する例である。
<style>
.btn2 { opacity: 0.4; cursor: not-allowed; disabled; }
</style>
上の例のようにdisabled属性を使用すると、ボタンを使用できないようにできる。このように使用が禁止されたボタンは半透明に見える。このときcursorプロパティの値をnot-allowedに設定すると、使用が禁止されたボタンをよりそれらしく表現できる。
floatプロパティを利用して、ボタンでメニューを作ることもできる。
<style>
.btn {
background-color: #87CEEB;
border: solid 1px #00BFFF;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
</style>
さまざまな形のボタン例
CSSのアニメーション(animation)効果を利用すると、ボタンにさらに多様な効果を適用できる。
次の例は、マウスを乗せるとボタンの表示内容が変わる例である。
<style>
.btn span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.btn span::after {
content: "▶";
opacity: 0;
transition: 0.5s;
}
.btn:hover span::after {
opacity: 1;
right: 0px;
}
</style>
上の例で’▶‘記号は、::afterセレクターを利用して「ボタン」という文字列の直後に挿入される。このときopacityプロパティ値を0に設定して、最初は見えないようにする。しかしマウスをボタンの上に乗せると、opacityプロパティ値が1に変更され、目に見えるようになる。このときtransition効果が実行され、0.5秒かけてゆっくりopacityプロパティ値が変更される。
次の例は、ボタンを押すとボタン上に別の色が波紋のように広がる例である。
<style>
.btn {
background-color: orange;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.btn::after {
content: "";
background-color: #FFD700;
display: block;
opacity: 0;
transition: all 0.8s;
}
.btn:active::after {
opacity: 1;
transition: 0s
}
</style>
上の例は、:activeセレクターと::afterセレクターを利用してtransition効果を設定することで実装している。
次の例は、本物のボタンのように押す効果を適用したボタンの例である。
<style>
.btn {
background-color: orange;
display: inline-block;
border: none;
outline: none;
border-radius: 20px;
box-shadow: 0 9px #B0B0B0;
}
.btn:active {
background-color: #FF8C00;
box-shadow: 0 5px #808080;
transform: translateY(4px);
}
</style>
上の例では、まずbox-shadowプロパティを利用してボタンに影効果を設定する。その後、ユーザーがボタンを押すと、:activeセレクターとtransform効果を利用してボタンの位置を少し下へ移動させる。これにより、ボタンが本当に押されたような効果を与えることができる。