[Bootstrap] 부트스트랩 버튼 색상 변경하기

 

일반적으로 부트스트랩에서 제공하는 색상은 Primary, Secondary, Success, Danger, Warning, Info, Light, Dark로 8가지입니다. 하지만 이는 한정적이고 본인이 표현하고자 하는 색상으로는 한계가 있습니다.

 

이번에는 원하는 부트스트랩 버튼의 색상을 임의로 변경하는 방법에 대해서 알아보도록 하겠습니다.

 

1. 색 이름을 이용한 버튼 색 변경

HTML 색 이름을 이용하는 방법은 기본적으로 HTML에서 제공하는 표준 색 이름과 윈도에서 분류된 X11 색 이름을 사용하는 방법입니다.

 

색 이름에는 red, green, blue, black, white 등과 같이 영문으로 표기로 사용합니다.

class에 text-white 또는 text-black(dark) 등을 주어 버튼 텍스트의 색상을 변경할 수 있으며,

style background-color 속성을 통해 버튼 색 변경을 해줄 수 있습니다.

또한 class에 btn을 입력해야 부트스트랩 버튼 디자인을 유지할 수 있습니다.

<!-- red 버튼 -->
<button type="button" class="btn text-white" style="background-color: red;">Red</button>

<!-- green 버튼 -->
<button type="button" class="btn text-white" style="background-color: green;">Green</button>

<!-- blue 버튼 -->
<button type="button" class="btn text-white" style="background-color: blue;">Blue</button>

<!-- 그 외 다양한 색의 버튼 -->
<button type="button" class="btn text-white" style="background-color: black;">black</button>
<button type="button" class="btn" style="background-color: white;">white</button>
<button type="button" class="btn" style="background-color: aquamarine;">Aquamarine</button>
<button type="button" class="btn" style="background-color: pink;">Pink</button>

위 HTML 코드를 통해 다음과 같은 결과를 만들 수 있습니다.

 

 

2. 16진수를 이용한 버튼 색 변경

다음은 16진수를 이용하여 버튼 색을 바꾸는 방법입니다.

각 색상마다 16진수 코드로 할당하여 색상 표가 존재합니다. 검정(#000000)부터 하양(#FFFFFF)까지 상당히 많은 색상을 부여할 수 있습니다.

기본적인 색상 코드 예시로 빨강(#FF0000), 초록(#00FF00), 파랑(#0000FF) 노랑(#FFFF00), 마젠타(#FF00FF), 청록색(#00FFFF) 등이 있습니다.

<!-- red 버튼 -->
<button type="button" class="btn text-white" style="background-color: #FF0000;">Red</button>

<!-- green 버튼 -->
<button type="button" class="btn text-white" style="background-color: #00FF00;">Green</button>

<!-- blue 버튼 -->
<button type="button" class="btn text-white" style="background-color: #0000FF;">Blue</button>

<!-- Cyan 버튼 -->
<button type="button" class="btn" style="background-color: #00FFFF;">Cyan</button>

<!-- Magenta 버튼 -->
<button type="button" class="btn" style="background-color: #FF00FF;">Magenta</button>

<!-- Yellow 버튼 -->
<button type="button" class="btn" style="background-color: #FFFF00;">Yellow</button>

<!-- black, white 버튼 -->
<button type="button" class="btn text-white" style="background-color: #000000;">black</button>
<button type="button" class="btn" style="background-color: #FFFFFF;">white</button>

위 HTML 코드를 통해 다음과 같은 결과를 만들 수 있습니다.

 

3. 10진수를 이용한 버튼 색 변경

10진수를 이용한 버튼 색 변경은 16진수와 유사하지만 표현 방식이 다릅니다.

16진수로 표현하는 방법은 '#012345'와 같이 표현하나, 10진수의 표현은 rgb(0~255, 0~255, 0~255)과 같이 표현합니다.

간단한 예시로 빨강은 rgb(255, 0, 0), 초록은 rgb(0, 255, 0), 파랑은 rgb(0, 0, 255)입니다.

<!-- red 버튼 -->
<button type="button" class="btn text-white" style="background-color: rgb(255, 0, 0);">Red</button>

<!-- green 버튼 -->
<button type="button" class="btn text-white" style="background-color: rgb(0, 255, 0);">Green</button>

<!-- blue 버튼 -->
<button type="button" class="btn text-white" style="background-color: rgb(0, 0, 255);">Blue</button>

<!-- Cyan 버튼 -->
<button type="button" class="btn" style="background-color: rgb(0, 255, 255);">Cyan</button>

<!-- Magenta 버튼 -->
<button type="button" class="btn" style="background-color: rgb(255, 0, 255);">Magenta</button>

<!-- Yellow 버튼 -->
<button type="button" class="btn" style="background-color: rgb(255, 255, 0);">Yellow</button>

<!-- black, white 버튼 -->
<button type="button" class="btn text-white" style="background-color: rgb(0, 0, 0);">black</button>
<button type="button" class="btn" style="background-color: rgb(255, 255, 255)">white</button>

위 HTML 결과는 다음과 같이 만들 수 있습니다.

 

위 내용을 종합하여 작성한 코드입니다.

See the Pen Bootstrap_Button_Color by IT is True (@IT_is_True) on CodePen.