프로그래밍/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>