깔끔한 느낌의 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> |
'웹개발 > HTML' 카테고리의 다른 글
| HTML5 새로운 태그 (0) | 2014.06.15 |
|---|---|
| 이클립스 브라우저 설정<Kepler> // (Luna 버전 추가) (0) | 2014.06.13 |
| apple 느낌의 css 메뉴바 (0) | 2014.06.08 |
| HTML 5장 (테이블 태그) (0) | 2014.06.04 |
| HTML 4장 (목록태그) (0) | 2014.06.04 |