본문 바로가기
웹개발/웹개발

AQUA 타입의 버튼 제작하기

by 에르소 2014. 6. 12.



깔끔한 느낌의 Aqua 타입 버튼

HTML 5 + CSS 로 제작되었습니다.


HTML5

<body>

<div class="button aqua">

<div class="loveactually">HTML5</div>


CSS3

<STYLE>

.button {

width: 120px;

height: 24px;

padding: 5px 16px 3px;

-webkit-border-radius: 16px;

-moz-border-radius: 16px;

border: 2px solid #ccc;

position: relative;

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: -webket-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 .loveactually {

position: absolute;

top: 0;

left: 5px;

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

height: 1px;

width: 122px;

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)));

}

</style> 


'웹개발 > 웹개발' 카테고리의 다른 글

HTML5 새로운 태그  (0) 2014.06.15
이클립스 브라우저 설정<Kepler> // (Luna 버전 추가)  (0) 2014.06.13
AQUA 타입의 버튼 제작하기  (0) 2014.06.12
apple 느낌의 css 메뉴바  (0) 2014.06.08
HTML 5장 (테이블 태그)  (0) 2014.06.04
HTML 4장 (목록태그)  (0) 2014.06.04

태그

, , , , ,

댓글0