10秒で設置完了！コピペで使えるボタンデザイン（ホバーアクションつき）

コピー＆ペーストだけの10秒で設置完了なボタンです。

背景色や文字色、ホバーのアクションを変更してオジリナルのボタンも簡単につくれます。

フラットな角丸ボタン

Hello!

.button01 {
   background: #2096f3;
   border: none;
   border-radius: 5px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
   color: #fff;
   padding: 15px 0;
   width: 200px;
}
.button01:hover {
   background: #0d7ad0;
   box-shadow: none;
}

フラットな四角いボタン

Hello!

.button02 {
   background: #00bcd4;
   border: 2px solid transparent;;
   color: #fff;
   padding: 15px 0;
   width: 200px;
}
.button02:hover {
   background: #fff;
   border: 2px solid #00bcd4;
   color: #00bcd4;
}

フラットな枠だけボタン

Hello!

.button03 {
   background: #fff;
   border: 2px solid #00bcd4;
   color: #00bcd4;
   padding: 15px 0;
   width: 200px;
}
.button03:hover {
   background: #00bcd4;
   border: 2px solid transparent;
   color: #fff;
}

フラットな押しごたえのあるボタン

Hello!

.button04 {
   background: #ff9800;
   border: none;
   border-radius: 5px;
   box-shadow: 0 8px 0 #c97800;
   color: #fff;
   padding: 15px 0;
   width: 200px;
}

グラデーションのふわっとしたボタン

Hello!

.button05 {
   background: linear-gradient(-45deg, #22e3bb 0%, #2196F3 100%);
   border: none;
   border-radius: 30px;
   box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.15);
   color: #fff;
   padding: 15px 0;
   width: 200px;
}

立体的なつるっとしたボタン

Hello!

.button06 {
   background: linear-gradient(0deg, #32a4ff 0%, #2196F3 49%, #3fa9fe 50%, #88caff 100%);
   border: none;
   border-radius: 6px;
   box-shadow: 0px 5px 0 #047ad3;
   color: #fff;
   padding: 15px 0;
   width: 200px;
}

文字間隔が広がるボタン

Hello!

.button07 {
   background: #2096f3;
   border: none;
   border-radius: 5px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
   color: #fff;
   padding: 15px 0;
   width: 200px;
}
.button07:hover {
   letter-spacing: 0.3em;
}

古いWindows風なボタン

Hello!

.button08 {
   background: #ebebeb;
   border-top: 4px solid #ddd;
   border-bottom: 4px solid #9fa6ab;
   border-right: 4px solid #9fa6ab;
   border-left: 4px solid #ddd;
   color: #333;
   padding: 15px 0;
   width: 200px;
}

二重枠ボタン

Hello!

.button09 {
   background: linear-gradient(-45deg, #22e3bb 0%, #2196F3 100%);
   border: 2px solid #2196F3;
   color: #fff;
   padding: 15px 0;
   width: 200px;
   outline: solid 2px #2196F3;
}

グラデーション枠ボタン

Hello!

.button10 {
   background: #fff;
   border-top: 5px solid #2196F3;
   border-bottom: 5px solid #22e3bb;
   background-image: linear-gradient(#2196F3, #22e3bb), linear-gradient(#2196F3, #22e3bb);
   background-size: 5px 100%;
   background-position: 0 0, 100% 0;
   background-repeat: no-repeat;
   box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
   color: #0f94f6;
   padding: 15px 0;
   width: 200px;
}