[HTML/CSS] 버튼 배경색 지정하기

 

background-color

버튼의 배경색은

CSS의 background-color 속성으로 지정할 수 있습니다.

 

 

  예제  

<button>Default 버튼</button>
<button class='skyblue_btn'>하늘색</button>
<button class='orange_btn'>오렌지색</button>
<button class='purple_btn'>보라색</button>

.skyblue_btn {
  background-color: skyblue;
}

.orange_btn {
  background-color: #FFA500;
}

.purple_btn {
  background-color: rgb(128, 0, 128);
}

background-color 속성을 이용하여

버튼의 색깔을 변경하였습니다.

 

그런데, 배경색이 변경된 버튼은

기존의 버튼처럼, 마우스 오버가 되거나, 버튼이 클릭되었을 때

배경색이 변경되지 않아서, 마치 눌러지지 않는 버튼 처럼 보이고 있습니다.

다음 포스팅에서는

배경색이 변경된 버튼에 마우스 오버, 클릭 등의 액션이 발생했을 때

배경색을 변경해주는 방법을 정리해보도록 하겠습니다.