[기능 구현]
이 버튼효과는 보기에는 약간 복잡해 보이지만 가상선택자 after 와 before을 통해서 간단히 만들수 있다.
구체적인 순서는
1. 버튼 구현
a 태그로 버튼모양 구현
2. after, before을 이용해 border의 모양 바꾸기
a::before 가상선택자로
기존의 a 태그보다
x축으로 넓이가 좀더 길고
y축으로 높이가 좀더 짧은
가상요소를 생성한다.
a::after 가상선택자로
기존의 a 태그보다
Y축으로 높이가 좀더 길고
x축으로 넓이가 좀더 짧은
가상요소를 생성한다.
3. transition과 transform 활용
- -transform의 scale을 줄이는 효과 를 적용하고 transition으로 부드럽게 사라지도록 한다.
- after요소는 x축 넓이가 커서 결과적으로 border의 y축 부분을 없앴기 때문에 scaleY(1) -> scaleY(0)
- before요소는 y축 높이가 커서 결과적으로 border의 x축 부분을 없앴기 때문에 scaleX(1) -> scaleX(0)
- before의 transition은 delay를 줘서 동시에 사라지지 않게 구현한다.
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button effect : squre</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<a href="#">
<span>Button</span>
</a>
</body>
</html>[CSS]
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #111;
}
a {
position: relative;
display: inline-block;
padding: 15px 30px;
border: 2px solid #fff;
color: #fff;
/* 대문자 */
text-transform: uppercase;
text-decoration: none;
font-weight: 600;
font-size: 20px;
}
/* ==== before ==== */
/* 넓이가 더 크고 높이가 더 작다. */
a::before {
content: "";
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% - 12px);
background-color: #111;
transition: 0.5s ease-in-out;
transform: scaleY(1);
transition-delay: 0.5s;
}
/*y축 방향으로 줄어든다. */
a:hover:before {
transform: scaleY(0);
}
/* ==== after ==== */
/* 넓이가 더 작고 높이가 더 크다. */
a::after {
content: "";
position: absolute;
left: 6px;
top: -2px;
height: calc(100% + 4px);
width: calc(100% - 12px);
background-color: #111;
transition: 0.5s ease-in-out;
transform: scalex(1);
}
/*x축 방향으로 줄어든다. */
a:hover::after {
transform: scalex(0);
}
a span {
position: relative;
z-index: 3;
}
'WEB animation & effect > button' 카테고리의 다른 글
| 반짝이는 버튼 effect (0) | 2021.10.04 |
|---|---|
| 그라데이션 버튼 effect (0) | 2021.10.04 |
| 버튼 효과 : painting (0) | 2021.09.29 |
| 버튼 하단 슬라이더 (0) | 2021.09.06 |