1. HOME
  2. ホームページ作成の小技
  3. ボタンデザイン ふわっとhover フラットボタン アウトラインボタン

TECHNIQUES

ホームページ作成の小技

東京 のさくっとホームページ作成のHP制作の小技

ボタンデザイン ふわっと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 ;
}