오늘은 앙증맞은 appstore 버튼을 가지고 건질건 좀 건져봅시다.ㅎ
레이아웃 구성 자체는 굉장히 심플하게 되어 있구요.
버튼 역할을 하는 <a> 태그 안에 fontawesome의 핸드폰 폰트, 상단 설명 영역, App Store 타이틀 영역 이렇게 3개의 영역이 전부입니다.
아래에 깔려있는 박스와 두께는 따로 영역이 지정된게 아니고 box-shadow 속성을 통해서 구현했군요.
소스를 보면서 찬찬히 살펴봅시다.
우선 버튼의 높이와 바닥판의 역할을 하는 두개의 속성값을 연달아 지정한 것을 볼 수 있습니다.
이렇게 여러개의 속성값을 콤마(,)로 연달아서 지정이 가능합니다.
.btn {
...
box-shadow: 0 0.75em 0 #63a7ee, 0 1.25em 0 0.35em #c9e8e3;
...
}
버튼 눌렀을때 눌리는 표현은 :active 셀렉터를 통해 속성값들을 지정하였네요.
.btn:active {
box-shadow: 0 0 0 0.35em #c9e8e3;
-moz-transform: translate(0, 1.25em);
-ms-transform: translate(0, 1.25em);
-webkit-transform: translate(0, 1.25em);
transform: translate(0, 1.25em);
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
box-shadow 값을 재지정하고 translate 를 이용하여 1.25em 만큼 아래로 이동시켰군요.
간단한 사용 예제 및 Demo
See the Pen THREES App Store Button by Katy DeCorah (@katydecorah) on CodePen.
버튼 레이아웃 관련 codepen
2015/11/18 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.11.19] css3, jquery 를 활용한 회전 소셜 버튼
2015/10/07 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.10.07] CSS3 transform활용 animation welcome 버튼
'Dev. 웹 > Front-end 웹개발을 위한 codepen' 카테고리의 다른 글
| [2015.12.11] 깔끔한 UI - White UI Kit (Pure CSS) (0) | 2015.12.11 |
|---|---|
| [2015.12.10] Javascript 로 구현한 HTML5 Web Drawing Studio (0) | 2015.12.10 |
| [2015.12.07] download button design - progress bar 진행상태가 합쳐진 다운로드 버튼 (0) | 2015.12.07 |
| [2015.12.04] 마우스 위치에 따른 프로필 사진 변경 아이디어 (0) | 2015.12.04 |
| [2015.12.01] react.js 를 활용한 To-Do List (0) | 2015.12.01 |