CSSによるボタンデザイン 1
CSSで実装するボタンデザインを紹介します。
目次
共通のHTMLとCSS
ボタンの基本のHTMLとCSSです。
HTML
<a href="#" class="button">button</a>CSS
.button {
display: inline-block;
width: 100px;
height: 60px;
line-height: 60px;
text-decoration: none;
border: 1px solid #000;
}共通のHTMLとCSS
ホバーで色が変わるボタン
ホバーすると色が変わるボタンです。
CSS
.button {
color: #000;
background-color: #fff;
}
.button:hover {
color: #fff;
background-color: #000;
}ホバーで色が変わるボタン
ホバーで色がゆっくり変わるボタン
ホバーすると色がゆっくり変わるボタンです。
CSS
.button {
color: #000;
background-color: #fff;
transition: all 0.2s;
}
.button:hover {
color: #fff;
background-color: #000;
}ホバーで色がゆっくり変わるボタン
押すとへこむボタン 1
クリックするとへこむボタンです。
CSS
.button {
position: relative;
box-shadow: 0 5px 0 #000;
}
.button:active {
top: 4px;
box-shadow: 0 1px 0 #000;
}押すとへこむボタン 1
押すとへこむボタン 2
クリックするとへこむボタンです。先ほどのものとはへこみ方が異なります。
CSS
.button {
position: relative;
box-shadow: 0 5px 0 #000;
}
.button:active {
top: 4px;
box-shadow: 0 1px 0 #000;
}押すとへこむボタン 2
押すとへこむボタン 3
「押すとへこむボタン 1」をヌルっと動くようにしたものです。
CSS
.button {
position: relative;
background-color: #000;
border: none;
}
.button::before {
content: 'button';
position: absolute;
bottom: 5px;
left: 0;
box-sizing: border-box;
width: 100px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #000;
background-color: #fff;
border: 1px solid #000;
transition: transform 0.1s;
}
.button:active::before {
transform: translateY(4px);
}押すとへこむボタン 3