自分用に一覧化したものがほしくて作ったのでシェアします。
あくまで個人的に思ったものなので多少合わないと思うものもあるかもしれませんが、可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトです。
いずれも画像やJavaScriptなどは使用せずに見た目から動きまで全てCSSで表現しており、CSSなのでカラー変更やフォントサイズの変更なども容易にできます。

  • 閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。
  • 基本的に必要だと思う記述は全て掲載しておりますが、例えばfont-familyやfont-sizeなどのように環境によって大きく記述が異なるようなものは省略して紹介しているので、場合にはよって実装してみたものと紹介しているデモとでは見栄えが異なる場合があります。

手書き風ボーダーのボタン #1

Button

角丸指定する際に利用するborder-radiusですが、普段よく使うような単純な記述ではなく水平・垂直もそれぞれ指定する形にすることで、このように枠線を手書きしたようなボタンに見せることができます。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.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の値をいろいろ変更してみると面白い見た目ができるかもしれません。

 

Button

また、border-styleを変えることでも、また違った感じの見せ方をできます。
例えばこちらはborder-style: dashed;を使用したもので、こちらを使用する場合はHTMLは先ほどと同様でCSSは下記のように記述します。

多少ですがborder-radiusの値も変更してあります。

.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;
}

 

Button

こちらはborder-style: dotted;を使用したもので、こちらを使用する場合は同じくHTMLは同様でCSSは下記のように記述します。

多少ですがborder-radiusの値も変更してあります。

.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

Button

基本的な記述は先ほど紹介したものと一緒ですが、そこに更にWeb Fontなどを組み合わせることでより手書き感あるデザインのボタンにすることもできます。
サンプルとしてここではGoogle Fontの「Covered By Your Grace」を使用してみた例で、実装にはHTMLとCSSをそれぞれ下記のように記述します。

別途Web Fontを呼び出すための記述もしてください。

<a class="button" href="#">Button</a>
.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;
}

ステッチ装飾のあるボタン

Button

border-style: dashed;とborder-radiusを組み合わせてステッチ装飾があるボタンデザインを表現する方法です。
実装にはHTMLとCSSをそれぞれ下記のように記述し、ステッチ部分は擬似要素を利用して作成しています。

<a class="button" href="#">Button</a>
.button {
  position: relative;
  display: inline-block;
  padding: .8em 4em;
  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;
}

 

Button

border-style: dashed;とborder-radiusを組み合わせてステッチ装飾があるボタンデザインを表現する方法です。
実装にはHTMLとCSSをそれぞれ下記のように記述し、ステッチ部分は擬似要素を利用して作成しています。

基本的な実装方法は一緒ですが、擬似要素に指定しているborder-radiusの値を「1. 手書き風ボーダーのボタン #1」で紹介したように指定した場合は先ほどとは違ったステッチの見栄えにすることができます。
実装にはHTMLは先ほどのものと同様でCSSを下記のように記述すれば実装できます。

.button {
  position: relative;
  display: inline-block;
  padding: .8em 4em;
  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;
}

ふわっと浮くボタン

Button

ホバーするとふわっとボタンが浮き上がり、更にボタン下にあったシャドウのサイズを変化させることでよりボタンが浮いているように見せるというものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#"><span>Button</span></a>
.button,
.button span {
  position: relative;
  display: inline-block;
}
.button span {
  padding: .65em 4em;
  background: linear-gradient(#fe5f95 , #ff3f7f);
  border: 1px solid #fe3276;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  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%;
  transform: translateX(-50%);
  transition: .3s ease-in-out;
}
.button:hover span {
  transform: translateY(-10px);
}
.button:hover::after {
  width: 70%;
  height: 18px;
}

 

Button

こちらはホバーではなく、animationを使って常にボタンがふわふわと浮いているように見せたものです。
実装にはHTMLは先ほどのものと同様でCSSを下記のように記述すれば実装できます。

.button,
.button span {
  position: relative;
  display: inline-block;
}
.button span {
  padding: .65em 4em;
  background: linear-gradient(#fe5f95 , #ff3f7f);
  border: 1px solid #fe3276;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  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%;
  transform: translateX(-50%);
  animation: 3s shadow ease-in-out infinite;
}
@keyframes float {
  50% {
    transform: translateY(-10px);
  }
}
@keyframes shadow {
  50% {
    width: 70%;
    height: 18px;
  }
}

ホバーで回転する円形ボタン

Button

ホバー時にくるくるっと回転するボタンです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#"><span>Button</span></a>
.button {
  display: inline-block;
}
.button span {
  display: inline-block;
  width: 120px;
  height: 120px;
  line-height: 120px;
  background: linear-gradient(#fe5f95 , #ff3f7f);
  border: 1px solid #fe3276;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.button:hover span {
  animation: spin .3s ease-in-out;
}
@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}

ホバーで拡大する円形ボタン

Button

ホバーすると拡大する円形タイプのボタンで、こちらは一瞬だけ大きくなった後また元のサイズに戻るという動きです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.button {
  display: inline-block;
  width: 120px;
  height: 120px;
  line-height: 120px;
  background: linear-gradient(#fe5f95 , #ff3f7f);
  border: 1px solid #fe3276;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.button:hover {
  animation: scale .3s ease-in-out;
}
@keyframes scale {
  50% { transform: scale(1.1); }
}

 

Button

同じくホバーすると拡大するタイプのボタンですが、こちらはホバー時にボタンを拡大しつつ、更に少し傾くようにしたものになります。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.button {
  display: inline-block;
  width: 120px;
  height: 120px;
  line-height: 120px;
  background: linear-gradient(#fe5f95 , #ff3f7f);
  border: 1px solid #fe3276;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: .2s ease-in-out;
}
.button:hover {
  transform: scale(1.1) rotate(-15deg);
}

ホバーでぴょこんと動くボタン

Button

ホバーするとボタンがぴょこんと少し跳ねる（？）ように動くボタンで、実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.button {
  display: inline-block;
  padding: .65em 4em;
  background: linear-gradient(#fe5f95 , #ff3f7f);
  border: 1px solid #fe3276;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: .3s ease-in-out;
}
.button:hover {
  animation: bounce 2s ease-in-out;
}
@keyframes bounce {
  5%  { transform: scale(1.1, .8); }
  10% { transform: scale(.8, 1.1) translateY(-5px); }
  15% { transform: scale(1, 1); }
}

ホバーでぷるぷる震えるボタン

Button

ホバーするとぷるぷる震えるボタンで、実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.button {
  display: inline-block;
  padding: .65em 4em;
  background: linear-gradient(#fe5f95 , #ff3f7f);
  border: 1px solid #fe3276;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: .3s ease-in-out;
}
.post-contents #button13:hover {
  animation: tremble .3s ease-in-out;
}
@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); }
}

背景が枠からズレたボタン

Button

デフォルトでは背景をあえて枠からズレた感じで配置しておき、ホバーするとズレた背景が枠内におさまる（移動する）動きをつけたボタンです。
背景となる部分は擬似要素を利用して表現しており、実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#"><span>Button</span></a>
.button {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: .65em 4em;
  border: 2px solid #333;
  color: #333;
  text-decoration: none;
  text-align: center;
  transition: .3s ease-in-out;
}
.button span {
  position: relative;
  z-index: 2;
}
.button::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  content: '';
  width: 100%;
  height: 100%;
  border: 2px solid #333;
}
.button::after {
  position: absolute;
  top: 5px;
  left: 5px;
  content: '';
  width: 101%;
  height: 105%;
  background-color: #fe5f95;
  transition: .3s ease-in-out;
}
.button:hover {
  color: #fff;
}
.button:hover::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

Button

パッと見やホバー時の動きなどは先ほどとほぼ一緒で、こちらはデフォルト時の背景にtransform: rotate();を組み合わせてみたものになります。
実装にはHTMLは先ほどのものと同様でCSSを下記のように記述すれば実装できます。

.button {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: .65em 4em;
  color: #333;
  text-decoration: none;
  text-align: center;
  transition: .3s ease-in-out;
}
.button span {
  position: relative;
  z-index: 2;
}
.button::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  content: '';
  width: 100%;
  height: 100%;
  border: 2px solid #333;
}
.button::after {
  position: absolute;
  top: 4px;
  left: 4px;
  content: '';
  width: 102%;
  height: 102%;
  background-color: #fe5f95;
  transform: rotate(1deg);
  transition: .3s ease-in-out;
}
.button:hover {
  color: #fff;
}
.button:hover::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(0);
}

ここではサンプル表示の都合上、いずれもテキストをspanで括ったり枠線を擬似要素でわざわざ表示していますが、背景色がないなど実装箇所周りのスタイルによってはこれらは不要でもっとシンプルに実装できます。
具体的にはHTMLspan・span向けのスタイル・枠線用の::before擬似要素がそれぞれ不要になり、その代わり枠線用で.buttonに直接border: 2px solid #333;を指定して::before擬似要素にz-index: -1;を追記すれば、もう少しスッキリしたコードで実装できます。

アイコンがアニメーションしてるボタン

Button

よくあるアイコン付きボタンのアイコンにアニメーションをつけたものです。
このサンプルではcontentに機種依存文字使う形にしていますが、もちろんアイコンフォントなどでもできます。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#"><span>Button</span></a>
.button {
  display: inline-block;
  padding: .65em 3em;
  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;
  transition: .3s ease-in-out;
}
.button span {
  position: relative;
  display: inline-block;
  padding-left: 1.6em;
}
.button span::before {
  position: absolute;
  top: 6px;
  left: 0;
  content: '\002764';
  color: #fff;
  font-size: 20px;
  line-height: 1;
  animation: icon 1.5s ease-in-out infinite;
}
@keyframes icon {
  50% {
    transform: scale(1.2);
  }
}

 

Button

同じくアイコンにアニメーションをつけたもので、先ほどはハートを拡大縮小させる動きでしたが、こちらは星をくるくる回転させているものになります。
実装にはHTMLは先ほどのものと同様でCSSを下記のように記述すれば実装できます。

.button {
  display: inline-block;
  padding: .65em 3em;
  background: linear-gradient(#fe5f95 , #ff3f7f);
  border: 1px solid #fe3276;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: .3s ease-in-out;
}
.button span {
  position: relative;
  display: inline-block;
  padding-left: 1.6em;
}
.button span::before {
  position: absolute;
  top: 6px;
  left: 0;
  content: '\002605';
  color: #fff;
  font-size: 20px;
  line-height: 1;
  animation: icon 1.5s ease-in-out infinite;
}
@keyframes icon {
  50% {
    transform: rotateY(360deg);
  }
}

今回のサンプルはいずれも常にアニメーションしているものですが、少し記述を変えればホバー時にのみアイコンがアニメーションされるようにもできます。

ここでは可愛らしいデザインや遊び心あるような感じのサイトなどに相性が良いと紹介はしてきましたが、使い方次第では様々なテイストに合わせられますし、ちょっと動きをつけたい要素とかボタン以外の要素にも適用させることもできます。
また、いくつかあったように組み合わせてみるとまた違った見た目やエフェクトにもできそうです。

上で紹介してきた内容の一部は以下のデモを非常に参考にさせてもらいました。