【CSS】アニメーションで色が変わるボタンを作る

オンマウスで色がスライドする、アニメーションボタンをCSSで作ります。

◆HTML

<a href="#" class="btn btn-medium btn-l-r">アニメーション ボタン</a>

◆CSS

.btn {
position: relative;
background: transparent;
display: inline-block;
text-decoration: none;
border: 1px solid;
border-radius: 4px;
margin-right: 20px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.btn:after {
content: "";
position: absolute;
border-radius: 4px;
-webkit-transition: 0.3s;
transition: 0.3s;
z-index: -1;
background: transparent;
}
.btn:before {
content: "";
position: absolute;
}

.btn-medium {
padding: 7px 13px;
}

.btn-l-r {
color: #2196f3;
border-color: #2196f3;
}
.btn-l-r:hover {
color: #ffffff;
}
.btn-l-r:hover:after {
background: #2196f3;
width: 100%;
}
.btn-l-r:after {
top: 0;
left: 0;
width: 0%;
height: 100%;
}

※「#2196f3」の部分で色変更が出来ます。

⇒ サンプルページはこちら