여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 그린것 같은 3d 버튼 만들기
그린것 같은 3d 버튼 만들기
2년전 작성
2년전 수정

깔끔한 디자인의 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 움직인다.

완성

기본 예시

Mingg`s Diary
밍구
공부 목적 블로그