초보자를 위한 CSS 버튼

오늘 이 블로그에서는 html과 css만 사용하여 간단한 버튼 스타일 css를 만드는 방법을 배웁니다. 이 초보자 CSS 튜토리얼에서는 간단한 CSS 유틸리티 클래스를 사용하여 버튼을 만들 것입니다. 시작하기 전에 CSS 파일에서 마진과 패딩을 재설정해야 합니다.

* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
}

먼저 기본 스타일에 대한 CSS 파일에 .btn 클래스를 생성해야 합니다.

.btn {
 padding: 0.5rem 1.5rem;
 cursor: pointer;
 display: inline-block;
 text-decoration: none;
 font-weight: 400;
 border-style: none;
 border-radius: 0.25rem; 
}

다음으로 .bg-blue 또는 .bg-primary 중 하나를 선택해야 합니다. 그런 다음 .text-white 클래스를 만듭니다.

.bg-blue {
 background-color: #0000ff;
}

.text-white {
 color: #fff;
}

이제 html 파일에서 이 클래스를 사용하십시오.

<button class="text-white btn bg-blue">Button</button>

버튼을 더 만들 수 있습니다.

스타일.css

* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
}
.btn {
 padding: 0.5rem 1.5rem;
 cursor: pointer;
 display: inline-block;
 text-decoration: none;
 font-weight: 400;
 border-style: none;
 border-radius: 0.25rem; 
}

.bg-red {
 background-color: #ff0000;
}
.bg-green {
 background-color: #009933;
}
.bg-gray {
 background-color: #808080;
}
.bg-blue {
 background-color: #0000ff;
}
.bg-yellow {
 background-color: #ffff00;
}
.bg-indigo {
 background-color: #4b0082;
}
.bg-black {
 background-color: #000000;
}
.bg-white {
 background-color: #fff;
}
.text-white {
 color: #fff;
}
.text-black {
 color: #000000;
}

index.html

<button class="text-white btn bg-green">Button</button>
<button class="text-white btn bg-gray">Button</button>
<button class="text-black btn bg-yellow">Button</button>
<button class="text-white btn bg-blue">Button</button>
<button class="text-white btn bg-indigo">Button</button>
<button class="text-black bg-white btn">Button</button>
<button class="text-white bg-black btn">Button</button>