CSSによるボタンデザイン 2
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 {
position: relative;
}
.button::before {
content: 'hover';
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 100px;
height: 60px;
line-height: 60px;
text-decoration: none;
background-color: #fff;
color: #000;
opacity: 0;
}
.button:hover::before {
opacity: 1;
}ホバーでテキストが変わるボタン
ホバーで形が変わるボタン
ボタンにマウスを乗せると、長方形から楕円形に変化します。
CSS
.button:hover {
border-radius: 50%;
}ホバーで形が変わるボタン
ホバーで傾くボタン
ボタンにマウスを乗せると、ボタンが右に傾きます。
CSS
.button:hover {
transform: rotateZ(10deg);
}ホバーで傾くボタン
ホバーで回るボタン
ボタンにマウスを乗せると、ボタンが右に回ります。
CSS
.button: {
transition: transform 0.8s;
}
.button:hover {
transform: rotateZ(360deg);
}ホバーで回るボタン
ホバーで回りながら形が変わるボタン
「ホバーで形が変わるボタン」と「ホバーで回るボタン」の合わせ技です。ボタンが回っている間に形が変わります。
CSS
.button: {
transition: border-radius 0.8s, transform 0.8s;
}
.button:hover {
border-radius: 50%;
transform: rotateZ(360deg);
}ホバーで回りながら形が変わるボタン