cssだけでグラデーションのボタンを作る

CSS on 30 Sep , 2016

グラデーションの背景やボタンは非常に綺麗ですが、
画像で作ってしまうと、色を変更したいときに面倒ですよね。

特にグラデーションのボタンなんかは、オンマウスで切り替わったりすると、
変更があったときにまた切替前と切替後で2枚作成しなければいけません。
でもこれがすべてCSSで指定してソースを変更するだけでいいので簡単ですね!

OFF…
testb01

ON!!!
testb02

まずボタンはこのように記述します。

– HTML –

TEST

次にcssでグラデーションをかけます。
好みの色にするのが結構大変でした…。

– CSS –

.btm-l {
height: 143px;
width: 80%;
text-align: center;
font-size: 40px;
color: #fff;
margin: 0 auto;
padding-top: 56px;
margin-top: 53px;
letter-spacing: 0.2em;

}

.btm_color {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .5)), to(rgba(160, 160, 160, .5)));
background: linear-gradient(to bottom, rgba(255, 25, 13, 0), rgb(225, 113, 61));
background-color: rgb(213, 7, 7);
-webkit-transition: background-color .4s;
transition: background-color .4s;
}
.btm_color:hover {
background-color: rgb(255, 220, 200);
}

レスポンシブ化が進んできている今日ですが、
なるべく画面の伸縮に耐えられるcssで作成するために工夫していきたいです。

今回もボタンだったので次回は別の話題を探してきます!
以上、遠藤でした。