깔끔한 디자인의 3D 버튼을 만들고 싶다.
버튼 만들기
HTML 이용하여 버튼을 먼저 만들자.
codepen(https://codepen.io/kathykato/pen/gOOjgmP)에서 발견한 코드를 뜯어보자.
HTML
CSS 꾸미기
CSS 이용하여 컴퓨터로 그린것 같은 버튼을 만들어보자.
CSS
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
body {
font-size: 1rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: #fff;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-size: inherit;
font-family: inherit;
}
button.learn-more {
font-weight: 600;
color: #382b22;
text-transform: uppercase;
padding: 1.25rem 2rem;
background: #fff0f0;
border: 2px solid #b18597;
border-radius: 0.75rem;
transform-style: preserve-3d;
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}
button.learn-more::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f9c4d2;
border-radius: inherit;
box-shadow: 0 0 0 2px #b18597, 0 0.625rem 0 0 #ffe3e2;
transform: translate3d(0, 0.75rem, -1rem);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
button.learn-more:hover {
background: #ffe9e9;
transform: translate(0, 0.25rem);
}
button.learn-more:hover::before {
box-shadow: 0 0 0 2px #b18597, 0 0.5rem 0 0 #ffe3e2;
transform: translate3d(0, 0.5rem, -1rem);
}
button.learn-more:active {
background: #ffe9e9;
transform: translate(0rem, 0.75rem);
}
button.learn-more:active::before {
box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
transform: translate3d(0, 0, -1rem);
}
사용된 코드 설명
display: flex; align-items: center; justify-content: center;
:
<body> 태그의 하위 요소를 <body> 태그의 정 가운데에 위치하게 한다.
min-height: 100vh;
:
최소 높이를 뷰포트 100%로 설정한다.
position: relative;
:
요소를 기본 흐름에 따라 배치한다.
text-transform: uppercase;
:
text를 대문자로 바꾼다.
box-shadow: 0 0 0 2px #b18597, 0 0.625rem 0 0 #ffe3e2;
:
2px 만큼 확산하고 #b18597 색상으로 표현한 그림자, y축으로 0.0625rem 거리 떨어지게 하는 #ffe3e2 색상으로 표현한 그림자를 만든다.
transform: translate3d(0, 0.75rem, -1rem);
:
x축으로 0, y축으로 0.75rem, z축으로 -1rem 움직인다.
cubic-bezier(0, 0, 0.58, 1);
:
점점 빨라지다가 천천히 느려진다.
transform 150ms;
:
150ms 동안 변화한다.
transform: translate(0, 0.25rem);
:
x축으로 0, y축으로 0.25rem 움직인다.
완성
기본 예시
공부 목적 블로그