참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* Pressable Button Drafts */
.press-button-demo {
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
padding:14px;
background:#080808;
border:1px solid #2a2a2a;
}
.press-button {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:118px;
height:32px;
padding:0 18px;
box-sizing:border-box;
font-size:12px;
font-weight:700;
letter-spacing:-0.2px;
line-height:1;
color:#eee !important;
text-decoration:none !important;
user-select:none;
cursor:pointer;
background:linear-gradient(to bottom, #333 0%, #252525 50%, #1a1a1a 100%);
position:relative;
transition:
transform 70ms ease,
box-shadow 70ms ease,
background 70ms ease,
filter 70ms ease;
}
/* 1. 구형 윈도우식 기본 양각 */
.press-button-basic {
border-top:1px solid #777;
border-left:1px solid #666;
border-right:1px solid #050505;
border-bottom:1px solid #000;
box-shadow:
inset 1px 1px 0 rgba(255,255,255,0.22),
inset -1px -1px 0 rgba(0,0,0,0.75),
0 2px 0 #050505,
0 3px 5px rgba(0,0,0,0.65);
text-shadow:0 -1px 0 #000;
}
.press-button-basic:hover {
filter:brightness(1.12);
}
.press-button-basic:active {
transform:translateY(2px);
border-top:1px solid #050505;
border-left:1px solid #050505;
border-right:1px solid #777;
border-bottom:1px solid #666;
box-shadow:
inset 2px 2px 3px rgba(0,0,0,0.85),
inset -1px -1px 0 rgba(255,255,255,0.1),
0 0 0 #050505;
background:linear-gradient(to bottom, #171717 0%, #202020 52%, #2b2b2b 100%);
}
/* 2. 더 두꺼운 기계식 버튼 */
.press-button-heavy {
border-radius:3px;
border-top:1px solid #8a8a8a;
border-left:1px solid #767676;
border-right:1px solid #050505;
border-bottom:1px solid #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.28),
inset 1px 0 0 rgba(255,255,255,0.12),
inset -1px -1px 0 rgba(0,0,0,0.8),
0 1px 0 #151515,
0 3px 0 #050505,
0 5px 8px rgba(0,0,0,0.75);
text-shadow:0 -1px 0 #000;
}
.press-button-heavy:hover {
background:linear-gradient(to bottom, #3a3a3a 0%, #292929 50%, #1c1c1c 100%);
}
.press-button-heavy:active {
transform:translateY(3px);
box-shadow:
inset 2px 2px 4px rgba(0,0,0,0.9),
inset -1px -1px 0 rgba(255,255,255,0.12),
0 1px 0 #050505;
background:linear-gradient(to bottom, #151515 0%, #1e1e1e 55%, #2a2a2a 100%);
}
/* 3. CRT/글로시 버튼 */
.press-button-gloss {
border-radius:4px;
border:1px solid #0a0a0a;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
inset 0 -1px 0 rgba(0,0,0,0.8),
0 0 0 1px #3b3b3b,
0 2px 0 #070707,
0 4px 8px rgba(0,0,0,0.7);
overflow:hidden;
text-shadow:0 1px 0 #000;
}
.press-button-gloss::before {
content:"";
position:absolute;
left:2px;
right:2px;
top:2px;
height:42%;
border-radius:3px 3px 1px 1px;
background:linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0.04));
pointer-events:none;
}
.press-button-gloss:hover {
filter:brightness(1.15) contrast(1.08);
}
.press-button-gloss:active {
transform:translateY(2px);
box-shadow:
inset 2px 2px 5px rgba(0,0,0,0.95),
inset 0 1px 0 rgba(255,255,255,0.08),
0 0 0 1px #181818;
filter:brightness(0.92);
}
/* 4. 얇고 날카로운 메뉴 버튼 */
.press-button-sharp {
height:28px;
border-radius:1px;
border-top:1px solid #6f6f6f;
border-left:1px solid #606060;
border-right:1px solid #070707;
border-bottom:1px solid #000;
box-shadow:
inset 1px 1px 0 rgba(255,255,255,0.16),
inset -1px -1px 0 rgba(0,0,0,0.82),
0 1px 0 #000;
}
.press-button-sharp:hover {
box-shadow:
inset 1px 1px 0 rgba(255,255,255,0.25),
inset -1px -1px 0 rgba(0,0,0,0.82),
0 0 0 1px #7b3d63,
0 1px 0 #000;
}
.press-button-sharp:active {
transform:translateY(1px);
padding-top:1px;
border-top:1px solid #000;
border-left:1px solid #080808;
border-right:1px solid #686868;
border-bottom:1px solid #555;
box-shadow:
inset 2px 2px 3px rgba(0,0,0,0.9),
inset -1px -1px 0 rgba(255,255,255,0.09);
}
/* 5. 홈이 파이는 패널형 버튼 */
.press-button-panel {
border-radius:5px;
border:1px solid #141414;
box-shadow:
0 0 0 1px #4a4a4a,
inset 1px 1px 0 rgba(255,255,255,0.2),
inset -1px -1px 0 rgba(0,0,0,0.8),
0 2px 4px rgba(0,0,0,0.85);
}
.press-button-panel::after {
content:"";
position:absolute;
left:5px;
right:5px;
bottom:4px;
height:1px;
background:rgba(255,255,255,0.08);
box-shadow:0 1px 0 rgba(0,0,0,0.7);
pointer-events:none;
}
.press-button-panel:hover {
background:
linear-gradient(to bottom, #3b3b3b 0%, #282828 50%, #181818 100%);
box-shadow:
0 0 0 1px #7b3d63,
inset 1px 1px 0 rgba(255,255,255,0.24),
inset -1px -1px 0 rgba(0,0,0,0.8),
0 2px 5px rgba(0,0,0,0.85);
}
.press-button-panel:active {
transform:translateY(2px);
padding-top:2px;
background:
linear-gradient(to bottom, #151515 0%, #1d1d1d 50%, #292929 100%);
box-shadow:
0 0 0 1px #222,
inset 2px 2px 5px rgba(0,0,0,0.95),
inset -1px -1px 0 rgba(255,255,255,0.12);
}