自分用に一覧化したものがほしくて作ったのでシェアします。あくまで個人的に思ったものなので多少合わないと思うものもあるかもしれませんが、可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトです。いずれも画像やJavaScriptなどは使用せずに見た目から動きまで全てCSSで表現しており、CSSなのでカラー変更やフォントサイズの変更なども容易にできます。
※閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。
※基本的に必要だと思う記述は全て掲載しておりますが、例えばfont-familyやfont-sizeなどのように、環境によって大きく記述が異なるようなものは省略して紹介しているので、場合にはよって実装してみたものと紹介しているデモとでは見栄えが異なる場合があります。
CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ 目次
1. 手書き風ボーダーのボタン #1
角丸指定する際に利用するborder-radiusですが、普段よく使うような単純な記述ではなく水平・垂直もそれぞれ指定する形にすることで、このように枠線を手書きしたようなボタンに見せることができます。
実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
display: inline-block;
padding: .75em 4em;
border: 2px solid #333;
border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
color: #333;
text-decoration: none;
text-align: center;
}もう少し手書き感を強くしたいなど、線の感じを調整したい時はborder-radiusの値をいろいろ変更してみると面白い見た目ができるかもしれません。
また、border-styleを変えることでも、また違った感じの見せ方をできます。
例えばこちらはborder-style: dashed;を使用したもので、こちらを使用する場合はHTMLは先ほどと同様で、CSSは以下のように記述します。
※多少ですがborder-radiusの値も変更してあります。
CSS
.button {
display: inline-block;
padding: .75em 4em;
border: 2px dashed #333;
border-radius: .4em 2em .5em 3em/3em .5em 2em .5em;
color: #333;
text-decoration: none;
text-align: center;
}こちらはborder-style: dotted;を使用したもので、こちらを使用する場合は同じくHTMLは同様で、CSSは以下のように記述します。
※多少ですがborder-radiusの値も変更してあります。
CSS
.button {
display: inline-block;
padding: .75em 4em;
border: 2px dotted #333;
border-radius: 3em .5em 2em .3em/.4em 2em .9em 3em;
color: #333;
text-decoration: none;
text-align: center;
}2. 手書き風ボーダーのボタン #2
基本的な記述は先ほど紹介したものと一緒ですが、そこに更にWeb Fontなどを組み合わせることでより手書き感あるデザインのボタンにすることもできます。
サンプルとして以下はGoogle Fontの「Covered By Your Grace」を使用してみた例で、実装にはHTMLとCSSをそれぞれ下記のように記述します。
※別途Web Fontを呼び出すための記述もしてください。
HTML
<a class="button" href="#">Button</a>CSS
.button {
display: inline-block;
padding: .2em 2.5em;
border: 2px solid #333;
border-radius: .4em 2em .5em 3em/3em .5em 2em .5em;
color: #333;
font-family: 'Covered By Your Grace', cursive;
font-weight: 400;
text-decoration: none;
text-align: center;
}3. ステッチ装飾のあるボタン
border-style: dashed;とborder-radiusを組み合わせてステッチ装飾があるボタンデザインを表現する方法です。
実装にはHTMLとCSSをそれぞれ下記のように記述し、ステッチ部分は擬似要素を利用して作成しています。
HTML
<a class="button" href="#">Button</a>CSS
.button {
position: relative;
display: inline-block;
padding: .8em 4em;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
}
.button::after {
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
content: '';
border: 2px dashed #fff;
border-radius: 4px;
}基本的な実装方法は一緒ですが、擬似要素に指定しているborder-radiusの値を「1. 手書き風ボーダーのボタン #1」で紹介したように指定した場合は、このように先ほどとは違ったステッチの見栄えにすることができます。
実装にはHTMLは先ほどのものと同様で、CSSを下記のように記述すれば実装できます。
CSS
.button {
position: relative;
display: inline-block;
padding: .8em 4em;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
}
.button::after {
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
content: '';
border: 2px dashed #fff;
border-radius: .4em 2em .5em 3em/3em .5em 2em .5em;
}4. ふわっと浮くボタン
ホバーするとふわっとボタンが浮き上がり、更にボタン下にあったシャドウのサイズを変化させることでよりボタンが浮いているように見せるというものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<a class="button" href="#"><span>Button<span></a>CSS
.button,
.button span {
position: relative;
display: inline-block;
}
.button span {
padding: .65em 4em;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.button::after {
position: absolute;
bottom: -15px;
left: 50%;
z-index: -1;
content: '';
width: 100%;
height: 24px;
background-color: rgba(0,0,0,.1);
border-radius: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.button:hover span {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.button:hover::after {
width: 70%;
height: 18px;
}こちらはホバーではなく、animationを使って常にボタンがふわふわと浮いているように見せたものです。
実装にはHTMLは先ほどのものと同様で、CSSを下記のように記述すれば実装できます。
CSS
.button,
.button span {
position: relative;
display: inline-block;
}
.button span {
padding: .65em 4em;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
-webkit-animation: 3s float ease-in-out infinite;
animation: 3s float ease-in-out infinite;
}
.button::after {
position: absolute;
bottom: -15px;
left: 50%;
z-index: -1;
content: '';
width: 100%;
height: 24px;
background-color: rgba(0,0,0,.1);
border-radius: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-animation: 3s shadow ease-in-out infinite;
animation: 3s shadow ease-in-out infinite;
}
@-webkit-keyframes float {
50% {
-webkit-transform: translateY(-10px);
}
}
@keyframes float {
50% {
transform: translateY(-10px);
}
}
@-webkit-keyframes shadow {
50% {
width: 70%;
height: 18px;
}
}
@keyframes shadow {
50% {
width: 70%;
height: 18px;
}
}5. ホバーで回転する円形ボタン
ホバー時にくるくるっと回転するボタンです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<a class="button" href="#"><span>Button<span></a>CSS
.button {
display: inline-block;
}
.button span {
display: inline-block;
width: 120px;
height: 120px;
line-height: 120px;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 50%;
color: #fff;
text-decoration: none;
text-align: center;
}
.button:hover span {
-webkit-animation: spin .3s ease-in-out;
animation: spin .3s ease-in-out;
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotateY(360deg); }
}
@keyframes spin {
100% { transform: rotateY(360deg); }
}6. ホバーで拡大する円形ボタン
ホバーすると拡大する円形タイプのボタンで、こちらは一瞬だけ大きくなった後また元のサイズに戻るという動きです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
display: inline-block;
width: 120px;
height: 120px;
line-height: 120px;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 50%;
color: #fff;
text-decoration: none;
text-align: center;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}
.button:hover {
-webkit-transform: scale(1.1) rotate(-15deg);
transform: scale(1.1) rotate(-15deg);
}同じくホバーすると拡大するタイプのボタンですが、こちらはホバー時にボタンを拡大しつつ、更に少し傾くようにしたものになります。
実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
display: inline-block;
width: 120px;
height: 120px;
line-height: 120px;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 50%;
color: #fff;
text-decoration: none;
text-align: center;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}
.button:hover {
-webkit-transform: scale(1.1) rotate(-15deg);
transform: scale(1.1) rotate(-15deg);
}7. ホバーでぴょこんと動くボタン
ホバーするとボタンがぴょこんと少し跳ねる（？）ように動くボタンで、実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
display: inline-block;
padding: .65em 4em;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.button:hover {
-webkit-animation: bounce 2s ease-in-out;
animation: bounce 2s ease-in-out;
}
@-webkit-keyframes bounce {
5% { -webkit-transform: scale(1.1, .8); }
10% { -webkit-transform: scale(.8, 1.1) translateY(-5px); }
15% { -webkit-transform: scale(1, 1); }
}
@keyframes bounce {
5% { transform: scale(1.1, .8); }
10% { transform: scale(.8, 1.1) translateY(-5px); }
15% { transform: scale(1, 1); }
}8. ホバーでぷるぷる震えるボタン
ホバーするとぷるぷる震えるボタンで、実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
display: inline-block;
padding: .65em 4em;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.post-contents #button13:hover {
-webkit-animation: tremble .3s ease-in-out;
animation: tremble .3s ease-in-out;
}
@-webkit-keyframes tremble {
15% { -webkit-transform: translateX(3px) rotate(1deg); }
30% { -webkit-transform: translateX(-3px) rotate(-1deg); }
45% { -webkit-transform: translateX(2px) rotate(1deg); }
60% { -webkit-transform: translateX(-2px) rotate(-1deg); }
75% { -webkit-transform: translateX(1px) rotate(1deg); }
90% { -webkit-transform: translateX(-1px) rotate(-1deg); }
}
@keyframes tremble {
15% { transform: translateX(3px) rotate(1deg); }
30% { transform: translateX(-3px) rotate(-1deg); }
45% { transform: translateX(2px) rotate(1deg); }
60% { transform: translateX(-2px) rotate(-1deg); }
75% { transform: translateX(1px) rotate(1deg); }
90% { transform: translateX(-1px) rotate(-1deg); }
}9. 背景が枠からズレたボタン
デフォルトでは背景をあえて枠からズレた感じで配置しておき、ホバーするとズレた背景が枠内におさまる（移動する）動きをつけたボタンです。
背景となる部分は擬似要素を利用して表現しており、実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
position: relative;
display: inline-block;
padding: .65em 4em;
border: 2px solid #333;
color: #333;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.button::after {
position: absolute;
top: 5px;
left: 5px;
z-index: -1;
content: '';
width: 101%;
height: 105%;
background-color: #fe5f95;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.button:hover {
color: #fff;
}
.button:hover::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
}パッと見やホバー時の動きなどは先ほどとほぼ一緒で、こちらはデフォルト時の背景にtransform: rotate();を使用してみたものになります。
実装にはHTMLは先ほどのものと同様で、CSSを下記のように記述すれば実装できます。
CSS
.button {
position: relative;
display: inline-block;
padding: .65em 4em;
border: 2px solid #333;
color: #333;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.button::after {
position: absolute;
top: 4px;
left: 4px;
z-index: -1;
content: '';
width: 102%;
height: 102%;
background-color: #fe5f95;
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.button:hover {
color: #fff;
}
.button:hover::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: rotate(0);
transform: rotate(0);
}10. アイコンがアニメーションしてるボタン
よくあるアイコン付きボタンのアイコンにアニメーションをつけたものです。
このサンプルではcontentに機種依存文字使う形にしていますが、もちろんアイコンフォントなどでもできます。
実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<a class="button" href="#"><span>Button<span></a>CSS
.button {
display: inline-block;
padding: .65em 3em;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 4px;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 600;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.button span {
position: relative;
display: inline-block;
padding-left: 1.6em;
}
.button span::before {
position: absolute;
top: 4px;
left: 0;
content: '\002764';
color: #fff;
font-size: 20px;
line-height: 1;
-webkit-animation: icon 1.5s ease-in-out infinite;
animation: icon 1.5s ease-in-out infinite;
}
@-webkit-keyframes icon {
50% { -webkit-transform: scale(1.2); }
}
@keyframes icon {
50% { transform: scale(1.2); }
}同じくアイコンにアニメーションをつけたもので、先ほどはハートを拡大縮小させる動きでしたが、こちらは星をくるくる回転させているものになります。
実装にはHTMLは先ほどのものと同様で、CSSを下記のように記述すれば実装できます。
CSS
.button {
display: inline-block;
padding: .65em 3em;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.button span {
position: relative;
display: inline-block;
padding-left: 1.6em;
}
.button span::before {
position: absolute;
top: 3px;
left: 0;
content: '\002605';
color: #fff;
font-size: 20px;
line-height: 1;
-webkit-animation: icon 1.5s ease-in-out infinite;
animation: icon 1.5s ease-in-out infinite;
}
@-webkit-keyframes icon {
50% { -webkit-transform: rotateY(360deg); }
}
@keyframes icon {
50% { transform: rotateY(360deg); }
}今回のサンプルはいずれも常にアニメーションしているものですが、少し記述を変えればホバー時にのみアイコンがアニメーションされるようにもできます。
以上、CSSで実装できる可愛らしいデザインで使えそうだと思ったボタンデザインやホバーエフェクトでした。
ここでは可愛らしいデザインや遊び心あるような感じのサイトなどに相性が良いと紹介はしてきましたが、使い方次第では様々なテイストに合わせられますし、ちょっと動きをつけたい要素とかボタン以外の要素にも適用させることもできます。
また、いくつかあったように組み合わせてみるとまた違った見た目やエフェクトにもできそうです。
上で紹介してきた内容の一部は以下のデモを非常に参考にさせてもらいました。