MEMORANDUM ボタンのデザイン
Web用の、HTMLとCSSのみで作ったボタンデザインのソースを、備忘録も兼ねてご紹介します。
シンプルなボタン
ポインタを乗せると色が変わります。
HTML
<a class="btn-01" href="#">BUTTON-01</a>
CSS
.btn-01 {
display: inline-block;
padding: 0.3em 1.5em;
text-decoration: none;
color: #a9a9a9;
border: solid 2px #a9a9a9;
border-radius: 4px;
transition: .4s;
}
.btn-01:hover {
background: #696969;
color: white;
}
少し影を入れた立体的なボタン
HTML
<a class="btn-02" href="#">BUTTON-02</a>
CSS
.btn-02 {
position: relative;
display: inline-block;
padding: 0.25em 1em;
text-decoration: none;
color: #FFF;
background: #03A9F4;
border: solid 1px #0f9ada;
border-radius: 25px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.btn-02:hover {
color: yellow;
}
.btn-02:active {
/*押したとき*/
border: solid 1px #03A9F4;
box-shadow: none;
text-shadow: none;
}
縁取りを入れたカジュアルなボタン
HTML
<a class="btn-03" href="#">BUTTON-03</a>
CSS
.btn-03 {
display: inline-block;
padding: 0.3em 3em;
text-decoration: none;
background: #e08a89;
color: #FFF;
border-radius: none;
box-shadow: 0px 0px 0px 5px #e08a89;
border: dashed 1px #FFF;
}
.btn-03:hover {
border: dotted 1px #FFF;
color: #ffe4e1;
}
シンプルな丸ボタン
HTML
<a class="btn-04" href="#">BUTTON-04</a>
CSS
.btn-04 {
display: inline-block;
text-decoration: none;
background: #007b43;
color: #FFF;
width: 8em;
height: 8em;
line-height: 8.2em;
border-radius: 50%;
text-align: center;
overflow: hidden;
transition: .4s;
}
.btn-04:hover {
background: #2f5d50;
color: #fef263;
}
立体的な丸ボタン
丸いボタンを立体的に、縁もつけてみました。
HTML
<a class="btn-05" href="#">BUTTON-05</a>
CSS
.btn-05 {
display: inline-block;
text-decoration: none;
color: #4a79b9;
width: 8em;
height: 8em;
line-height: 8.2em;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-weight: bold;
background-image: linear-gradient(#c2cfe8 0%, #95afd8 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: 0 1px 1px 7px rgba(0, 0, 0, 0.28);
box-shadow: 0px 0px 0px 6px #95afd8;
border: solid 1px #d7dfef;
}
.btn-05:hover {
color: #223a70;
}
.btn-05:active {
box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.32);
background-image: linear-gradient(#dbe5f8 0%, #c2cfe8 100%);
box-shadow: 0px 0px 0px 6px #c2cfe8;
}