ボタンデザイン　ふわっとhover　フラットボタン　アウトラインボタン

一番無難な形のボタンを作成しました!

結局このくらいのデザインのボタンが何にも利用出来て便利なものです。

青を基本色として、後は強制的に色をチェンジしています。

ふわっとhover フラットボタン

ふわっとhover フラットボタン　グリーン

ふわっとhover フラットボタン　オレンジ

ふわっとhover フラットボタン　ピンク

ふわっとhover フラットボタン　レッド

ふわっとhover アウトラインボタン

ふわっとhover アウトラインボタン　グリーン

ふわっとhover アウトラインボタン　オレンジ

ふわっとhover アウトラインボタン　ピンク

ふわっとhover アウトラインボタン　レッド

コードは以下の通りです

.btn-flat {  text-align: center; }
.btn-flat  a {
color: #ffffff;
background: #3C7DD1;
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 50px;
min-width: 240px;
height: 50px;
padding: 0 15px;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.btn-flat  a:hover {
text-decoration: none;
opacity: 0.8;
}
.btn-flat_green  a {
background: #6CC655 !important;
}
.btn-flat_orange  a {
background: #F0801A !important;
}
.btn-flat_pink  a {
background: #EE4056 !important;
}
.btn-flat_red  a {
background: #D4121C !important;
}


.btn-outline {  text-align: center; }
.btn-outline a {
color: #3C7DD1;
border:solid  2px #3C7DD1;
background: transparent;
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 50px;
min-width: 240px;
height: 50px;
padding: 0 15px;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.btn-outline a:hover {
color: #fff;
border-color: #3C7DD1;
background-color: #3C7DD1;
text-decoration: none;
}
.btn-outline_green a {
color: #6CC655 !important;
border:solid  2px #6CC655 !important;
}
.btn-outline_green a:hover {
color: #fff !important;
border-color: #6CC655 !important ;
background-color: #6CC655 !important ;
}
.btn-outline_orange a {
color: #F0801A !important;
border:solid  2px #F0801A !important;
}
.btn-outline_orange a:hover {
color: #fff !important;
border-color: #F0801A !important ;
background-color: #F0801A !important ;
}
.btn-outline_pink a {
color: #EE4056 !important;
border:solid  2px #EE4056 !important;
}
.btn-outline_pink a:hover {
color: #fff !important;
border-color: #EE4056 !important ;
background-color: #EE4056 !important ;
}
.btn-outline_red a {
color: #D4121C !important;
border:solid  2px #D4121C !important;
}
.btn-outline_red a:hover {
color: #fff !important;
border-color: #D4121C !important ;
background-color: #D4121C !important ;
}