カテゴリー: CSS

グラデーションCSSの例

html

<div id="sidebar">
<ul>
<li class="list2">
<a href="lentalspace.html" target="new">タヌキの<br >お部屋</a></li>
</ul>
</div>

#sidebar ul .list2 a {
color: #FFF;
font-size: 1.5em;
font-weight: bold;
width: 196px;
display: block;
text-decoration: none;
text-align: center;
background: -moz-linear-gradient(#03C,#6CF);
background: -webkit-linear-gradient(#03C,#6CF);
background: linear-gradient(to right,#03C,#6CF);
padding-top: 20px;
padding-bottom: 20px;
}
#sidebar ul .list2 a:hover {
background: -moz-linear-gradient(#F36,#FCC);
background: -webkit-linear-gradient(#F36,#FCC);
background: linear-gradient(to right,#F36,#FCC);
color: #FFF;
}