테스트 사이트 - 개발 중인 베타 버전입니다

CSS 버튼 색상

· 8년 전 · 4148

CSS 버튼 색상


버튼 색상


녹색 푸른 빨간 회색 검은

이 background-color속성을 사용하여 버튼의 배경색을 변경하십시오.


.button1 {background-color: #4CAF50;} /* Green */

.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */ 

.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 

.button5 {background-color: #555555;} /* Black */



[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}


.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */ 

.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 

.button5 {background-color: #555555;} /* Black */

</style>

</head>

<body>


<h2>Button Colors</h2>

<p>Change the background color of a button with the background-color property:</p>


<button class="button">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>


</body>

</html>


댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3810
3809
3808
3806
3805
3804
3799
3798
3796
3795
3794
3790
3784
3779
3776
3775
3774
3767
3765
3761
3752
3748
3734
3730
3723
3719
3706
3686
3656
3655