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

CSS 버튼 색상

· 8년 전 · 4146

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>


댓글 작성

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

로그인하기

게시글 목록

번호 제목
3381
3380
3379
3378
3377
3376
3375
3374
3373
3372
3371
3370
3369
3368
3367
3366
3365
3364
3363
3362
3361
3360
3359
3358
3357
3356
3355
3354
3351
3350