티스토리 뷰

프로그래밍/CSS 3.0

HTML5 + CSS3 만으로 아쿠아 버튼 만들기

쇠주는참이슬 2012. 3. 20. 14:04

이미지없이 CSS 만으로도 예쁜 버튼을 만들 수 있다.
주의할점은.. 오타를 조심합시다...







<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Aqua Button</title> 
<style type="text/css"> 
.button{
position:relative;
width:120px;
height:24px;
padding:5px 6px 3px;
-webkit-border-radius:16px;
-moz-border-radius:16px;
border:2px solid #ccc;
 
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight:800;
color:#fff;
text-shadow: rgba(10,10,10,0.5) 1px 2px 2px;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
 
.aqua{
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; 
}
 
.button .blaze {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 123px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%);  
}
 
.button:hover {
text-shadow: rgb(255, 255, 255) 0px 0px 5px;
top:1px;
}
 
</style>  
</head>
 
<body> 
<div class="button aqua"> 
  <div class="blaze"></div> 
  HTML5
</div> 
</body> 
</html>

'프로그래밍 > CSS 3.0' 카테고리의 다른 글

http://css3generator.com/  (0) 2012.03.20
트랜지션 (Transition)  (0) 2012.03.20
CSS3 투명도 조절 opacity  (0) 2012.03.20
그림자 효과 추가하기 -box-shadow  (0) 2012.03.20
모퉁이 잡아당겨서 크기 조절하기. resize 속성  (0) 2012.03.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함