CSS3でフェードイン・フェードアウトボタンをつくる
2014年3月28日CSSテクニック
jQueryを使わずCSS3だけでフェードイン・フェードアウトするボタンをつくります。
CSS
#button {
display: block;
width: 100px;
margin: 0 auto;
}
#button a {
display: block;
width: 100%;
border: 1px solid #52d3ff;
background-color: #52d3ff;
color: #ffffff;
padding: 12px 0;
text-align: center;
text-decoration: none;
transition: .2s linear;
-webkit-transition: .2s linear;
-moz-transition: .2s linear;
-o-transition: .2s linear;
-ms-transition: .2s linear;
}
#button a:hover {
background-color: #ffffff;
color: #52d3ff;
}
- Tweet
