pseudo class로 인터랙티브 버튼 만들기

얼마전에 만들었던 장바구니 페이지.

 

버튼 위에 커서를 올리면 손가락모양으로 바뀐다거나 하는 등의 동작을 하려면 어찌해야하오

 

.pay-button {
    width:200px;
    height: 50px;
    background-color: navy;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    
    
    float: right;
    cursor: pointer;
    
}

이건 내가 얼마전 만들었던 버튼이다.

cursor: pointer; 은 버튼위에 커서 올라갔을때 손가락모양으로 바뀐다는 것

 

 

.pay-button:hover{
    background-color: cornflowerblue;
}

.pay-button:focus{
    background: gray;
    /*포커스*/
}

.pay-button:active{
    /*누른상태일 때*/
    background-color: brown;
}

 

이런 코드들로 다양한 인터랙티브 동작이 가능하다

 

버튼뿐만 아니라 div박스나 text박스 등등 다 적용가능하다