こんにちは。
入社1年目の新米コーダーです。

今回は、前回ご紹介したCSS3を使用した、かわいいボタンホバーエフェクトをご紹介します。
ぶるぶるしたりくるくるしたり、かわいい動きを集めてみました。

CSS3

ぼたん
こちらがベースとなるボタンです。これに色んな動きをつけたいと思います！

【HTML】
<a class="button" href="#">ぼたん</a>

【CSS】

.button {
width: 150px;
height: 80px;
display: block;
background-color: #28A9E0;
font-weight: bold;
text-decoration: none;
text-align: center;
line-height: 80px;
outline: none;
}

(1) ぶるぶるする

ぶるぶる
animation-nameプロパティで、キーフレームアニメーションを適用させてぶるぶるさせます。
アニメーション開始時点（0%）から、終了時点（100%）まで、ぞれぞれのスタイルを適用させます！
【HTML】
<a class="button button01" href="#">ぶるぶる</a>

【CSS】

.button01 {
display: block;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
}
.button01:hover, .button01:focus, .button01:active {
animation-name: button01;
animation-duration: 0.75s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
@keyframes button01 {
10% {transform: translateX(3px) rotate(2deg);}
20% {transform: translateX(-3px) rotate(-2deg);}
30% {transform: translateX(3px) rotate(2deg);}
40% {transform: translateX(-3px) rotate(-2deg);}
50% {transform: translateX(2px) rotate(1deg);}
60% {transform: translateX(-2px) rotate(-1deg);}
70% {transform: translateX(2px) rotate(1deg);}
80% {transform: translateX(-2px) rotate(-1deg);}
90% {transform: translateX(1px) rotate(0);}
100% {transform: translateX(-1px) rotate(0);}
}

(2) パタッとフタする

ぱたっ
transformプロパティのrotateX()を使って、要素をくるっと回転させます。
今回は半回転させたいので、90度を指定します。
【HTML】
<a class="button button02" href="#"><span>ぱたっ</span></a>

【CSS】

.button02 {
display: block;
position: relative;
z-index: 2;
perspective: 300px;
transform-style: preserve-3d;
}
.button02,
.button02::before,
.button02::after {
transition: all .3s;
}
.button02::before,
.button02::after {
position: absolute;
z-index: -1;
content: '';
}
.button02:hover {
color: #fff;
}
.button02::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0070BA;
transform-origin: center top;
transform: rotateX(90deg);
opacity: 0;
}
.button02:hover::after {
transform: rotateX(0);
opacity: 1;
}

(3) キューブがくるっとする

( ﾟдﾟ )ｸﾜｯ!!くるっ
こちらもrotateX()を使います。
spanを2つ用意して、それぞれに適用させます。
【HTML】
<a class="button button03" href="#"><span class="button">( ﾟдﾟ )ｸﾜｯ!!</span><span class="button">くるっ</span></a>

【CSS】

.button03 {
background: none;
display: block;
position: relative;
perspective: 300px;
}
.button03 span {
background:none;
position: absolute;
box-sizing: border-box;
transition: all .3s;
pointer-events: none;
}
.button03 span:nth-child(1) {
background-color: #0070BA;
color: #fff;
transform: rotateX(90deg);
transform-origin: 50% 50% -30px;
}
.button03 span:nth-child(2) {
background-color:#28A9E0;
transform: rotateX(0deg);
transform-origin: 50% 50% -30px;
}
.button03:hover span:nth-child(1) {
background-color: #0070BA;
transform: rotateX(0deg);
}
.button03:hover span:nth-child(2) {
background-color: #0070BA;
transform: rotateX(-90deg);
}
.button03,
.button03::before,
.button03::after {
transition: all .3s;
}

(4) ポコッと上がる

ぽこっ

transformプロパティのtranslateY()で要素の位置を上に移動します。
影は、radial-gradient()で円形グラデーションを作ります。
【HTML】
<a class="button button04" href="#">ぽこっ</a>

【CSS】

.button04 {
display: inline-block;
vertical-align: middle;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
position: relative;
transition-duration: 0.3s;
transition-property: transform;
}
.button04:before {
background-color: #28A9E0;
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
transition-duration: 0.3s;
transition-property: transform, opacity;
}
.button04:hover, .button04:focus, .button04:active {
transform: translateY(-5px);
}
.button04:hover:before, .button04:focus:before, .button04:active:before {
opacity: 1;
transform: translateY(5px);
}

(5) はしっこがめくれる

ぺろん

【HTML】
<a class="button button05" href="#">ぺろん</a>
backface-visibilityプロパティでhiddenを指定し、裏面について指定します。

【CSS】

.button05 {
display: block;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
position: relative!important;
}
.button05:before {
pointer-events: none;
position: absolute!important;
content: '';
height: 0;
width: 0;
top: 0;
left: 0;
background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
z-index: 1000;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
transition-duration: 0.3s;
transition-property: width, height;
}
.button05:hover:before, .button05:focus:before, .button05:active:before {
width: 25px;
height: 25px;
}

————————–

いかがでしたでしょうか。
CSSだけでこんなにいろんな動きがつけれるなんて･･･CSS3おもしろいです。
もっと勉強して、ボタンだけでなく色んなものを動かしてみたいです！

お問い合わせ