【CSS】マウスオーバーでゆっくり色が変わるボタン【DEMO】 - N-PLUS.work

ホーム » N-PLUS 全記事一覧 » DEMO » 【CSS】マウスオーバーでゆっくり色が変わるボタン【DEMO】

【CSS】マウスオーバーでゆっくり色が変わるボタン【DEMO】

CSS／DEMO

■CSS CODE

aside {
width:100%;
margin:0;
padding:0;
}

aside > a,aside > a:hover {
font-size:100%;
text-align:center;
text-decoration:none;
color:#fff;
}

aside > a > p {
padding:4% 0;
background:#2f2e2e;
}

aside > a > p:hover {
color:#FFED00;
background:#2a4268;/*090C8F*/
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
-ms-transition: 0.8s;
transition: 0.8s;
}

■HTML CODE

<aside>
<a href="http://camp.n-plus.work/category/news/"><p>新着情報一覧</p></a>
</aside>