「ボタンってどうやってつくるの？」
「どうやったらいいボタンができるの？」
Webサイトやスマートフォンアプリでよく見かけるボタンは簡単に作れます。
学習を始めたばかりの人は知っておいて損は無い知識です。
ボタンの種類
ボタンはいろいろな場面で使用しています。htmlでボタンタグを使ったり、CSSの装飾で作成もできます。
移動ボタンや戻る・進むのボタン、ログインや新規登録のボタンなんかも一般的によく見かけます。
そのほかフォームのボタンは、上記のボタンとは違って、それを押せば、入力情報が別のファイルに渡されます。つまり、そのための処理をボタンに施しているのです。
同じように見えるボタンですが、ボタンのスタイルをつけられる要素は大きく分けて以下の3つです。
| リンク要素 特定のページへ移動、戻るなどのリンクボタン |
| <a href=”…”class=”button”>リンク</a> |
| ボタン要素 フォームの送信ボタンなど |
| <button type=”button”>ボタン</button> |
| インプット要素のtype属性がbuttonのもの submitやresetもボタンの形状になります。 |
| <input type=”button”> |
それでは、コピペで簡単に実装できるボタンデザインを紹介していきましょう。
※こちらのサンプルは、aリンクで使う用のボタンになっています。
ご自身のサイトデザインにあったカラーに変えてお使いください。
ボタンデザイン10選
押し込み式ボタン
シンプルな押しボタン、クリック(タップ)すると沈みます。
BUTTON<a href="#" class="btn-simple">BUTTON</a>.btn-simple {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #b22222;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #800000;
border-radius: 3px;
}
/*ボタンを押したとき*/
.btn-simple:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}文字を凹ませる
文字色を暗めにして周りに白っぽいシャドウをつけることで、凹んでいるように見えます。
BUTTON<a href="#" class="btn-simple-emboss">BUTTON</a>.btn-simple-emboss {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #cd5c5c;/*ボタン色*/
color: #b22222;/*ボタン色より暗く*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #e9967a;
border-radius: 3px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.btn-simple-emboss:active {
-webkit-transform: translateY(4px); /*ChromeとSafariは-webkit-必須、IEは-ms-*/
transform: translateY(4px); /*Y軸方向へ移動*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}文字を浮き上がらせる
文字の左と上に白の影を、右と下に黒の影をつけることで、浮き上がっているように見えます。
BUTTON<a href="#" class="btn-simple-raised">BUTTON</a>.btn-simple-raised {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #f08080;/*ボタン色*/
color: #f08080;/*ボタン色と同じに*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #cd5c5c;
border-radius: 3px;/*角の丸み*/
font-weight: bold;
text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}
.btn-simple-raised:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}ポップな雰囲気のボタン
ボタンの周りを線で囲うと、ポップでかわいいボタンになります。押したときに、影がブワッとアクション起こします。
BUTTON<a href="#" class="btn-pop">BUTTON</a>.btn-pop {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #ff1493;/*背景色*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
font-weight: bold;
border: solid 2px #c71585;/*線色*/
}
.btn-pop:active {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.30);
}グラデーションで優しいボタン
グラデーションで丸みを表現しています。やわらかめの色が合うと思います。
BUTTON<a href="#" class="btn-grd">BUTTON</a>.btn-grd {
display: inline-block;
position: relative;
text-decoration: none;
color: #f9a9ae;
width: 100px; /*ボタンサイズ（幅）*/
height: 50px;
line-height: 50px;
border-radius: 5px;
text-align: center;
overflow: hidden;
font-weight: bold;
background: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
.btn-grd:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);/*沈むようにＹ軸へ移動*/
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
background-image: linear-gradient(#fed6e3 0%, #ffbcbc 100%);/*グラデを明るく*/
}ふせん風押し込み式ボタン
クリックにより影が消えて沈みます。
BUTTON<a href="#" class="btn-fsn">BUTTON</a>.btn-fsn {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #ffe4e1;
border-left: solid 6px #f08080;/*左線、実線・太さ・色*/
color: #f08080;/*文字色*/
font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-fsn:active {
box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
transform: translateY(2px);
}色が変わるボタン
線で囲っただけのシンプルなボタンです。ホバーアクションで背景が変色します。
BUTTON<a href="#" class="btn-change">BUTTON</a>.btn-change {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #dc143c; /*文字色*/
border: solid 2px #dc143c; /*枠線の色*/
border-radius: 3px;
transition: .4s; /*アニメーションの所要時間*/
}
.btn-change:hover {
background: #dc143c; /*ホバー時の背景色*/
color: #fff; /*ホバー時の文字色*/
}二重線バージョン
BUTTON<a href="#" class="btn-change-double">BUTTON</a>.btn-change-double {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #ff1493;
border: double 3px #ff1493; /*二重線指定*/
border-radius: 5px;
transition: .4s;
}
.btn-change-double:hover {
background: #ffb6c1;
} 破線バージョン
BUTTON<a href="#" class="btn-change-broken">BUTTON</a>.btn-change-broken {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #a0522d;
border: dashed 1px #a0522d; /*破線指定*/
background: #f5deb3;
border-radius: 10px;
transition: .4s;
}
.btn-change-broken:hover {
background: #f4a460;
color: #f5deb3;
}円形ボタン
円形のボタンの背景をシンプルに単色で塗りつぶしました。
BUTTON<a href="#" class="btn-round">BUTTON</a>/*円形ボタン*/
.btn-round {
display: inline-block;
text-decoration: none;
background: #ffb6c1;
color: #FFF;
width: 80px; /*円の大きさ高さ*/
height: 80px; /*円の大きさ幅*/
line-height: 80px;
border-radius: 50%;
text-align: center;
overflow: hidden;
transition: .4s;
}
.btn-round:hover {
background: #ff69b4;
}にゅっと右に動くボタン
左と下に線をつけました。ホバー時には、にゅっ～とスライドします。
BUTTON<a href="#" class="btn-right-line">BUTTON</a>.btn-right-line {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
border-bottom: solid 3px #dc143c;
border-left: solid 3px #dc143c;
color: #dc143c;
transition: .4s;
}
.btn-right-line:hover {
padding-left: 0.9em;
padding-right: 0.3em;
}交差線から四角へホバーボタン
ホバーすると長方形に変わります。線や文字の色・太さも変えてどうぞ。
BUTTON<a href="#" class="btn-cross">BUTTON</a>.btn-cross {
display: inline-block;
position: relative;
padding: 0.25em 1em;
border-top: solid 2px red;
border-bottom: solid 2px red;
text-decoration: none;
font-weight: bold;
color: #c71585;
}
.btn-cross:before, .btn-cross:after {
content: '';
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
transition: .3s;
}
.btn-cross:before {
left: 7px;
}
.btn-cross:after {
right: 7px;
}
.btn-cross:hover:before {
top: 0px;
left:0;
height: 100%;
}
.btn-cross:hover:after {
top: 0px;
right: 0;
height: 100%;
}
おわりに
今回ご紹介したボタンを実際にいじってみて、色を変えるだけでもよし、線の太さや種類(一重線から二重線など)をかえて、ご自身のサイトデザインにあったものを見つけてくださいね！
コメント