CSS 아쿠아 버튼 스타일

✔️ CoolNovo 2.0.1.40에서 테스트하였습니다.

CSS 아쿠아 버튼 스타일

CSS 맥 버튼 스타일

• IE 9부터 지원

1 소스 코드

<style>
.aqua_btn{
padding:4px 15px 4px 15px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
background-color: rgb(60, 132, 198);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border: 1px solid #ccc;
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;

font-family: 나눔고딕, "맑은 고딕";
font-weight: 800;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
}
</style>
<span class="aqua_btn">아쿠아 버튼</span>

• 예제: http://zetawiki.com/ex/css/aqua_btn.php

2 같이 보기

• CSS 윈도우 7 버튼 스타일

3 참고

• http://girliemac.com/blog/2010/01/28/css3-aqua-button-revisited-for-firefox-3-6/