버튼 hover 효과

버튼의 다양한 애니메이션 hover 효과

 

공통 css

---

*{margin: 0; padding: 0;}
button{background: 0 none; border: 0 none;}
.buttons{position: relative; text-align: center; margin-top: 300px;}
.buttons button{overflow: hidden; position: relative; display: inline-block; vertical-align: top; width: 200px; height: 100px; line-height: 100px; border: 1px solid #225ea7; transition: all 0.5s;}
.buttons button:hover{color: #fff;}
.buttons button:before{content: ""; z-index: -1; position: absolute; background: #225ea7; transition: all 1s;}

---

1. 위에서 아래로 영역 채우기

---

.buttons .button1:before{left: 0; top: 0; width: 100%; height: 0; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;}
.buttons .button1:hover:before{height: 200%;}

---

 

 

2. 오른쪽에서 왼쪽으로 영역 채우기

---

.buttons .button2:before{right: 0; top: 0; width: 0; height: 100%; border-bottom-left-radius: 50%; border-top-left-radius: 50%;}
.buttons .button3:hover:before{width: 200%;}

---

 

3. 아래에서 위로 영역 채우기

---

.buttons .button3:before{left: 0; bottom: 0; width: 100%; height: 0; border-top-left-radius: 50%; border-top-right-radius: 50%;}
.buttons .button2:hover:before{height: 200%;}

---

 

4. 왼쪽에서 오른쪽으로 영역 채우기

---

.buttons .button4:before{left: 0; top: 0; width: 0; height: 100%; border-bottom-right-radius: 50%; border-top-right-radius: 50%;}
.buttons .button4:hover:before{width: 200%;}

---

 

5. 가운데서 양쪽으로 영역 채우기

---

.buttons.buttons2 .button5:before{left: 50%; top: 0; transform: translateX(-50%); width: 0; height: 100%;}
.buttons.buttons2 .button5:hover:before{width: 100%;}

---

 

6. 가운데서 대각선 영역 채우기 1

---

.buttons.buttons2 .button6:before{left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 200%; height: 0;}
.buttons.buttons2 .button6:hover:before{height: 300%;}

---

 

7. 가운데서 대각선 영역 채우기 2

---

.buttons.buttons2 .button7:before{left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(135deg); width: 200%; height: 0;}
.buttons.buttons2 .button7:hover:before{height: 300%;}

---

 

8. 가운데서 위아래로 영역 채우기

---

.buttons.buttons2 .button8:before{left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 0;}
.buttons.buttons2 .button8:hover:before{height: 100%;}

---