티스토리 뷰
1. Getting started
<html>
<head>
<title>CSS Only Button Demo</title>
</head>
</html>
2.Basic Styles
<style>
a.button {
font-size:30px;
color:#000;
text-decoration:none;
display:block;
width:578px;
padding:10px;
border:1px solid #DDD;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
a.button:hover {
color:#FFF;
border-color:#3278BE;
}
</style>
3. CSS3 Background Gradients
background:#FFFFFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
background:-moz-linear-gradient(0% 90% 90deg, #EEEEEE, #FFFFFF);
4. Custom Fonts
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css" />
<style>
a {
font-family: "Yanone Kaffeesatz", arial, serif;
}
</style>
5. Animation
a.button {
... other styles ...
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
6. Bonus: Active State
a.button:active {
background:#4195DD;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#003C82), to(#4195DD));
background:-moz-linear-gradient(0% 90% 90deg, #4195DD, #003C82);
}
'Language > CSS' 카테고리의 다른 글
| [ CSS ] 이미지 border color change mouseOver (0) | 2016.01.02 |
|---|---|
| [ CSS ] 스크롤 베너 (0) | 2016.01.02 |
| [ CSS ] IE 버전별 CCS 적용 (0) | 2016.01.02 |
| [ CSS ] 웹 표준 개발자의 IE8 고려사항 (0) | 2016.01.02 |
| [ CSS ] DOCTYPE 전환 / 브라우저모드 & 올바른 문서정의 (0) | 2016.01.02 |