HTML , CSS 로 버튼 만들기.

 

 

 

HTML 과 CSS 로 버튼 만들기.

 

 

---

 

 

 

 

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

 

 

 

기본적인 HTML 

 

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

 <div class="wrap">
      <div class="c22">Hover:Me</div>
    </div>

 

 

꾸미기를 위한 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

chry8822 - Overview