CSS - Transition practice

CSS - Transition practice 

 

 

https://www.figma.com/file/k6aekBk53MUKUwVqRHsSVx/Bugless-CSS?node-id=795%3A289

 

 

 

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: "Lato", sans-serif;
  background-color: #525252;
}

button,
input,
textarea {
  font-family: "Lato", sans-serif;
}

 

❗ button, input, textarea 같은 form 요소 안에 텍스트들은

body에 font-family 해줘도 안먹는 경우가 있으므로

따로 저렇게 font-family 해주자.

 

(나는 여태 * selector에 해줬었는데 그건 좀 효율적이지 않다고 한다..)

 

 

button {
  background-color: #fff;
  border: none;
  cursor: pointer;
}

버튼의 기본 스타일 제거하고, 

cursor은 pointer로 해주자.

 

 

 

처음엔 당연히 border-bottom을 생각했는데

바깥으로 생기기도하고,

디자인대로 길이가 늘어나지는 않아서

가상요소를 이용하는 방식을 택했다.

 

 

 

 

- 가상요소 만들기

 

.line-button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #0066ff;
  transition: width 1000ms;
}

 

항상 button의 좌측 하단에 붙어있어야 하므로

positon: absolute를 해줬다.

(자동으로 box가 되므로 display: block 필요없음)

 

처음에 width를 0으로 해준다.

 

 

 

- transition적용 ver. (버튼 hover시 ::after은!)

.line-button:hover::after {
  width: 100%;
}

 

 

 

🔻 전체코드 

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lato", sans-serif;
  background-color: #525252;
}

button,
input,
textarea {
  font-family: "Lato", sans-serif;
}

button {
  background-color: #fff;
  border: none;
  cursor: pointer;
}

.line-button {
  position: relative;
  color: #151b26;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  padding: 18px 30px;
}

.line-button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #0066ff;
  transition: width 1000ms;
}

.line-button:hover::after {
  width: 100%;
}

 

 

 

 

 

완성!

 

 

(gif로 하다보니 좀 프레임이 끊기지만, 실제로는 자연스럽게 잘 흐름)

 

 

 

 

index.html

0.00MB

 

 

---

ref lecture.

 

• https://edu.goorm.io/learn/lecture/20583
• https://github.com/rohjs/bugless-101/tree/master/css-basic/transition/templates