/* CSS 버튼1 */
button.click-me-button1 {
padding: 5px;
font-size: 18px;
box-sizing: border-box;
z-index: 5;
position: relative;
margin: 5px 0;
width: 100%;
height: 40px;
z-index: 10;
background-color: transparent;
border: none;
cursor: pointer;
}
button.click-me-button1::before {
content: "›";
font-weight: normal;
position: absolute;
top: 50%;
left: 16px;
font-size: 1em;
color: #fff;
transition: all 0.3s;
z-index: 20;
transform: translateY(-60%);
}
button.click-me-button1::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #555;
transition: all 0.3s;
z-index: 15;
}
button.click-me-button1:hover::before {
left: calc(100% - 25px);
opacity: 0;
}
button.click-me-button1:hover::after {
width: 100%;
background-color: #FF0000;
}
button.click-me-button1 > a {
position: relative;
display: block;
padding: 0 45px;
height: 100%;
line-height: 40px;
color: #222;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: all 0.3s;
z-index: 20;
display: flex;
align-items: center;
justify-content: flex-start;
text-decoration: none;
}
button.click-me-button1:hover > a {
text-decoration:none;
font-weight: bold;
color: #fff;
}
/* CSS 버튼1 끝 */
단축키
내 블로그
내 블로그 - 관리자 홈 전환 |
Q
Q
|
새 글 쓰기 |
W
W
|
블로그 게시글
글 수정 (권한 있는 경우) |
E
E
|
댓글 영역으로 이동 |
C
C
|
모든 영역
이 페이지의 URL 복사 |
S
S
|
맨 위로 이동 |
T
T
|
티스토리 홈 이동 |
H
H
|
단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.