HTML , CSS 로 버튼 만들기.

HTML , CSS 로 버튼 만들기.

HTML 과 CSS 로 버튼 만들기.

자바 스크립트 없이 CSS 의 속성을 이용해서 간단하고 효과적인 버튼을 들 수 있다. 처음 만들어 보는 거라 아직은 속성들이 정확하게 어떻게 작동하는지는 헷갈리지만 몇 번 더 만들어 보면 더 괜찮은 버튼을 만들 수 있을 같다.

기본적인 HTML

버튼 하나를 만들기 때문에 마크업은 단순하다.

Hover:Me

꾸미기를 위한 CSS

수업 중 실습으로 만든 거라 정리가 잘 안된 거 같다.

쓸데없는 속성들이 껴 있을 수도 있음(하나씩 실험하면서 하느라..)

.c22 { box-sizing: border-box; background-color: rgb(32, 32, 32); width: 300px; height: 300px; border-radius: 100%; transition: all 2s; padding-top: 125px; margin: 150px auto; } .c22:hover { background-color: royalblue; transform: scale(0.5); box-shadow: 0 0 30px 10px rgb(255, 245, 219); cursor: pointer; } .c22::before { position: absolute; content:"Hello World" ; font-size: 50px; color: whitesmoke; background-color: transparent; top: 0; left: 0; width: 100%; height: 100%; transform: translateY(-100%); transition: all 1.4s; z-index: 10; } .c22:hover::before { transform: translateY(0); background-color: rgb(212, 29, 59); padding-top: 120px; } .c22::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; transition: all 1s; transform: rotateY(90deg); } .c22:hover::after { transform: translateY(0); background-color: rgb(106, 211, 111, 0.8); padding-top: 120px; } .wrap { box-sizing: border-box; text-align: center; width: 600px; height: 600px; background-color: transparent; transition: all 3s; } .wrap:hover { background-color: rgb(32, 32, 32); }

결과물.

처음에 만든 버전 1과 그리고 위에 코드로 2차 수정한 버전 2가 있다.

버전 1

버전1

버전 2

버전2

엄밀히 따지면 버튼보다 호버 됐을 때의 상태를 버튼처럼 만든 것이다.

복습겹 시간이 될 때 여러 디자인으로 버튼을 만들어볼 생각이다.

https://github.com/chry8822

from http://covelope.tistory.com/18 by ccl(A) rewrite - 2021-11-11 10:27:25