CSS 버튼

웹사이트를 디자인할 때 종종 특정 방식으로 보이고 싶은 버튼이 있을 것입니다. 예를 들어, 버튼에 대한 사용자의 관심을 끌기 위해 다른 페이지 요소와 다른 배경색을 가진 버튼을 원할 수 있습니다.

개발자는 CSS를 사용하여 스타일이 지정된 버튼을 만들 수 있습니다. CSS를 사용하면 무엇보다도 버튼의 색상, 텍스트 크기, 테두리, 너비 및 높이를 변경할 수 있습니다.

이 자습서에서는 여러 CSS 속성을 사용하여 HTML 버튼의 스타일을 지정하는 방법을 예제와 함께 설명합니다. 이 튜토리얼을 읽으면 CSS를 사용하여 버튼을 스타일링하는 전문가가 될 것입니다.

버튼 개요

HTML에서 다양한 방법으로 버튼을 정의할 수 있습니다. 가장 일반적인 두 가지 접근 방식은 <button>입니다. 태그 또는 <input type=“button”> 요소. 이러한 접근 방식은 동일한 유형의 버튼을 반환합니다.

HTML 코드는 버튼을 정의하는 데 사용됩니다. 다음은 스타일이 적용되지 않은 HTML 버튼의 모습입니다.

이 버튼에 사용한 코드는 다음과 같습니다.

<button>Click me</button>


이 버튼은 기본 HTML 스타일을 사용하므로 지금은 버튼이 다소 평범해 보입니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

버튼의 스타일을 지정하려면, 즉 페이지에서 보이는 모양을 사용자 정의하려면 CSS를 사용해야 합니다. 이 기사에서는 버튼에 다음을 수행하는 방법에 대해 설명합니다.

• 배경색을 변경합니다.
• 텍스트 색상을 변경합니다.
• 텍스트 크기를 변경합니다.
• 여백을 추가합니다.
• 모서리를 둥글게.
• 색상 테두리를 추가합니다.
• :hover 기능을 사용합니다.
• 그림자 추가
• 너비를 변경합니다.
• 비활성화합니다.
• 애니메이션

또한 수평 및 수직 버튼 그룹을 만드는 방법에 대해 설명합니다.

배경 색상

버튼을 디자인할 때 가장 먼저 해야 할 일은 버튼의 배경색을 설정하는 것입니다. 기본적으로 버튼에는 흰색 배경과 검은색 텍스트가 있습니다. CSS background-color 속성을 사용하여 버튼의 배경색을 변경할 수 있습니다.

웹사이트용 버튼을 디자인하고 버튼의 배경이 분홍색이 되기를 원한다고 가정해 보겠습니다. 다음 CSS 코드를 사용하여 버튼의 색상을 변경할 수 있습니다.

index.html

<button class="button">Click me</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
background-color: pink;
}

코드 반환:

background-color 속성을 사용하여 버튼의 배경색을 분홍색으로 변경했습니다. 이 속성을 사용하여 버튼의 배경색을 원하는 색상으로 변경할 수 있습니다.

텍스트 색상

버튼의 텍스트 색상을 변경하려면 color 속성을 사용할 수 있습니다. 버튼을 디자인하고 있고 버튼에 분홍색 배경과 녹색 텍스트가 있기를 원한다고 가정합니다. 다음 코드를 사용하여 이 버튼을 만들 수 있습니다.

index.html

<button class="button">Click me</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
	color: green;
background-color: pink;
}

코드는 다음을 반환합니다.

우리 코드에서는 색상을 사용합니다. 녹색; 속성을 사용하여 버튼의 텍스트 색상을 녹색으로 설정합니다.

텍스트 크기

CSS font-size 속성을 사용하여 버튼 안의 텍스트 크기를 정의할 수 있습니다. 텍스트가 20px의 글꼴 크기를 갖기를 원한다고 가정합니다. 다음 코드를 사용하여 이를 수행할 수 있습니다.

index.html

<button class="button">Click me</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
font-size: 20px;
}

코드 반환:

버튼의 크기는 이전과 같지만 이제 내부 글꼴 크기는 20px입니다. font-size 속성을 사용하여 버튼의 텍스트 크기를 설정했습니다.

패딩

버튼을 디자인할 때 버튼 내부의 텍스트와 버튼의 외벽 사이에 일정한 공간을 확보할 수 있습니다. 이것이 padding 속성이 들어오는 곳입니다.

padding 속성은 길이 표시기(px, em 등) 또는 백분율 값을 사용하여 버튼의 텍스트와 테두리 사이의 일정한 간격을 정의합니다.

페이지에 두 개의 버튼을 생성한다고 가정합니다. 한 버튼에는 40px 패딩이 있어야 하고 다른 버튼에는 20px 패딩이 있어야 합니다. 다음 코드를 사용하여 이러한 버튼을 만들 수 있습니다.

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>

styles.css

.button1 {
	padding: 20px;
	font-size: 16px;
	background-color: blue;
	color: white;
}

.button2 {
	padding: 40px;
	font-size: 16px;
	background-color: blue;
	color: white;
}

코드 반환:

첫 번째 버튼은 버튼 내부의 텍스트와 버튼의 테두리 사이에 20px 경계를 가지고 있습니다. 두 번째 버튼은 버튼의 텍스트와 테두리 사이에 40px 경계를 가지고 있습니다. 이러한 버튼의 경우 이 패딩을 위한 충분한 공간이 있는지 확인하기 위해 너비 또는 높이 속성을 지정하지 않습니다. (아래에서 이러한 속성에 대해 설명합니다.)

둥근 ​​모서리

기본적으로 HTML의 버튼에는 정사각형 모서리가 있습니다. 그러나 버튼의 모서리가 둥근 모양을 원할 수도 있습니다.

border-radius 속성을 사용하여 모서리가 둥근 직사각형 버튼을 만들 수 있습니다. 다음은 border-radius 속성을 사용하는 코드의 세 가지 예입니다. 다양한 반지름 크기의 효과를 설명하기 위해 각 예제에서는 다른 크기의 테두리 반지름을 사용합니다.

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>

styles.css

.button1 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
border-radius: 5px;
}

.button2 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
border-radius: 10px;
}

.button3 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
border-radius: 15px;
}

코드 반환:

이 예에서는 세 개의 버튼을 만들었습니다. 버튼의 테두리 반경이 클수록 버튼의 모서리가 더 둥글게 나타납니다.

테두리 색상

CSS border 속성을 사용하여 버튼에 사용자 정의 색상 테두리를 추가할 수 있습니다.

버튼의 경계가 사용자에게 명확하도록 색상 테두리가 있는 버튼을 만들고 싶다고 가정합니다. 다음 코드를 사용하여 이러한 버튼을 만들 수 있습니다.

index.html

<button class="button">Click me</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1; // Light pink
	padding: 25px;
}

코드 반환:

버튼의 배경은 흰색이고 내용은 검정색이며 모든 가장자리에 25px 패딩이 있습니다. border 속성을 사용하여 버튼 주위에 3px 너비의 실선 테두리를 만들고 테두리 색상을 밝은 분홍색의 16진수 값인 #ffb6c1로 설정했습니다.

border 속성에 대해 더 알고 싶다면 CSS border 속성에 대한 기사를 읽어보세요.

호버

CSS :hover 선택기를 사용하여 사용자가 커서로 버튼 위로 마우스를 가져갈 때 웹 페이지에서 버튼 스타일을 변경하도록 지시할 수 있습니다.

검정색 텍스트와 흰색 배경이 있는 버튼을 디자인하고 사용자가 마우스를 가져가면 해당 텍스트 색상이 흰색으로 변경되고 배경색이 녹색으로 변경되기를 원한다고 가정합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

index.html

<button class="button">Click me</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
}

.button:hover {
	background-color: green;
	color: white;
}

코드 결과는 다음과 같습니다.

위 다이어그램의 첫 번째 버튼은 사용자가 버튼 위로 마우스를 가져가지 않을 때 버튼이 어떻게 표시되는지 보여줍니다. 보시다시피 코드는 검정색 텍스트, 분홍색 테두리 및 25px 패딩이 있는 흰색 버튼을 반환합니다. 이것은 버튼의 기본 상태입니다. 그러나 사용자가 버튼 위에 마우스를 올리면 버튼의 배경색이 녹색으로 변경되고 버튼의 텍스트 색상이 흰색으로 변경됩니다.

사용자의 커서가 버튼에서 멀어지는 즉시 버튼은 기본 상태로 돌아갑니다.

또한 transition-duration 속성을 사용하여 사용자가 커서로 버튼을 가리킨 후 버튼이 변경되는 데 걸리는 시간을 지정할 수 있습니다. 따라서 위의 버튼이 (녹색 배경과 흰색 텍스트로) 변경되는 데 1초가 걸리도록 하려면 다음 코드를 사용할 수 있습니다.

.button {
	…
	transition-duration: 1s;
}

이제 사용자가 버튼 위로 마우스를 가져가면 버튼이 변경되는 데 1초가 걸립니다. CSS 전환에 대한 초보자 가이드에서 CSS 전환에 대해 자세히 알아볼 수 있습니다.

그림자

CSS box-shadow 속성을 사용하여 버튼 그림자를 만들 수 있습니다. box-shadow 속성은 여러 매개변수를 받습니다. CSS box-shadow 튜토리얼에서 이러한 매개변수에 대해 알아볼 수 있습니다.

버튼을 디자인하고 있고 그림자가 있기를 원한다고 가정해 보겠습니다. 버튼에 대해 다음 코드를 사용하여 이 그림자를 만들 수 있습니다.

index.html

<button class="button">Click me</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
}

코드 반환:

이 예에서는 버튼에 그림자를 추가했습니다. 그림자에 대해 지정한 매개변수는 다음과 같습니다.

• x-오프셋은 0으로, 버튼 바로 아래에 그림자가 나타납니다.
• y 오프셋은 10px입니다. 즉, 그림자가 버튼 아래로 10px 확장됩니다.
• 흐림 효과 반경은 10px이며, 이는 그림자에 흐림 효과가 있음을 의미합니다.
• 버튼 그림자의 확산 반경은 0이므로 블러 주변에 확산이 없습니다.
• 그림자의 색상은 rgba(0,0,0,0.2)이며 밝은 회색입니다.

위의 코드 결과에서 볼 수 있듯이 우리의 버튼은 이러한 모든 속성과 함께 나타납니다.

너비

width 속성은 버튼의 너비를 정의할 수 있습니다. 기본적으로 버튼의 크기는 텍스트 내용을 기반으로 하지만 너비 속성을 사용하여 기본값을 재정의하고 특정 너비를 설정할 수 있습니다.

다음은 너비가 다른 세 개의 버튼의 예입니다.

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>

styles.css

.button1 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 250px;
}

.button2 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 50%;
}

.button2 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 100%;
}

코드 반환:

이 예에서는 너비가 다른 세 개의 버튼을 만들었습니다.

버튼 비활성화

버튼을 디자인할 때 비활성화하도록 결정할 수 있지만 페이지에는 계속 표시됩니다. 예를 들어, 사용자가 웹 양식의 모든 필드를 채울 때까지 버튼을 비활성화할 수 있습니다.

불투명도 및 커서 속성을 사용하여 비활성화된 버튼을 만들 수 있습니다. opacity 속성은 버튼에 투명도를 추가합니다. 이렇게 하면 비활성화된 것처럼 보입니다. 기본 불투명도는 투명도가 없는 색상을 표시하는 1입니다. CSS 불투명도 가이드에서 CSS 불투명도 속성에 대해 자세히 알아볼 수 있습니다.

커서 속성은 "허용되지 않음" 값을 할당하면 버튼을 비활성화합니다. 사용자가 이 값이 할당된 버튼 위로 마우스를 가져가면 커서가 정지 신호를 표시합니다.

다음은 HTML의 일반 버튼에 대한 코드와 비활성화된 버튼에 대한 코드입니다.

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>

styles.css

.button1 {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
}

.button2 {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: none;
  	opacity: 0.5;
  	cursor: not-allowed;
}

코드 반환:

두 버튼 모두 분홍색 #ffb6c1이 있습니다. 배경. 첫 번째 버튼의 배경은 기본적으로 완전히 불투명합니다. 이 버튼은 작동합니다(기본값). 두 번째 버튼은 불투명도 속성이 0.5로 설정되어 있습니다. 커서 속성 값이 not-allowed으로 설정됨 . 이렇게 하면 더 투명하고 작동하지 않는(비활성화된) 버튼이 생성됩니다.

버튼 그룹 생성

사이트를 개발할 때 버튼 그룹을 만들고 싶을 수 있습니다. 예를 들어 양식을 디자인하는 경우 사용자가 양식을 저장하거나, 뒤로 돌아가거나, 양식의 다음 페이지로 이동할 수 있도록 하는 세 개의 버튼이 있는 버튼 그룹을 원할 수 있습니다.

가로 ​​버튼 그룹

버튼을 나란히 표시하려면 CSS 버튼 그룹을 만들어야 합니다. 그룹에 표시할 버튼을 왼쪽으로 플로팅하여 버튼 그룹을 만들 수 있습니다. CSS float에 대한 가이드에서 CSS float 속성에 대해 자세히 알아볼 수 있습니다. 다음은 수평 버튼 그룹에 대한 코드의 예입니다.

index.html

<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css

.button {
background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: none;
	float: left;
}

코드 반환:

보시다시피 세 개의 버튼을 만들었습니다. 이들은 나란히 나타납니다.

마찬가지로 테두리 CSS 속성을 지정하여 각각 고유한 테두리가 있는 버튼 그룹을 만들 수 있습니다. 다음은 테두리가 있는 버튼 그룹을 만드는 데 사용할 수 있는 코드입니다.

index.html

<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css

.button {
background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: 2px solid blue;
	float: left;
}

코드 반환:

코드에서 각 버튼 주위에 2px의 파란색 실선 테두리를 지정했습니다. 이를 통해 그룹의 각 버튼을 시각적으로 구분할 수 있습니다.

세로 버튼 그룹

종종 버튼 그룹을 디자인할 때 버튼이 세로로 나타나길 원할 수 있습니다. 그것이 display:block CSS 속성이 들어오는 곳입니다.

다음은 display:block을 사용하여 CSS 버튼 그룹의 버튼을 세로로 표시하는 예입니다.

index.html

<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css

.button {
background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: 2px solid blue;
display: block;
}

코드 반환:

웹 브라우저는 이러한 버튼을 그룹화하여 세로로 표시합니다.

애니메이션 버튼

버튼을 디자인할 때 버튼에 애니메이션을 적용하여 더 인터랙티브하게 만들 수 있습니다. 아래에서는 CSS를 사용하여 버튼에 애니메이션을 적용하는 몇 가지 방법에 대해 설명합니다.

눌림

CSS에서는 사용자가 버튼을 클릭할 때 버튼이 눌린 것처럼 보이게 하는 효과를 만들 수 있습니다.

예를 들어 사용자가 클릭한 지 0.5초 후에 짙은 회색 그림자가 있는 밝은 파란색 버튼이 밝은 회색 그림자가 있는 분홍색으로 바뀌기를 원한다고 가정해 보겠습니다. 이것은 사용자에게 물리적으로 버튼을 누르고 있다는 느낌을 줄 것입니다. 이 작업을 수행하는 데 사용할 수 있는 코드는 다음과 같습니다.

index.html

<button class="button">Click me</button>

styles.css

.button {
   padding: 20px;
   font-size: 15px;
   color: white;
   background-color: lightblue;
   border: none;
   transition-duration: 0.5s;
   border-radius: 8px;
   box-shadow: 0 5px gray;
}

.button:active {
  background-color: #ffb6c1;
  box-shadow: 0 5px lightgray;
  transform: translateY(5px);
}

코드 결과는 다음과 같습니다.

왼쪽에서 버튼을 클릭하기 전에 버튼이 어떻게 나타나는지 볼 수 있습니다. 버튼은 밝은 파란색이고 어두운 회색 상자 그림자가 있습니다. 오른쪽에서 버튼을 클릭한 후(그리고 지정된 전환 시간이 경과한 후) 버튼의 모양을 볼 수 있습니다. 버튼에는 분홍색 배경과 밝은 회색 상자 그림자가 있습니다.

코드를 분해해 보겠습니다. .button 스타일에서 우리는:

• 버튼 주위에 20px 패딩을 만듭니다.
• 버튼 텍스트의 글꼴 크기를 15px로 설정합니다.
• 버튼의 텍스트 색상을 흰색으로 설정합니다.
• 버튼 색상을 하늘색으로 설정합니다.
• 버튼 주변의 기본 테두리를 제거했습니다.
• 호버 전환 시간을 0.5초로 설정합니다.
• 8px의 테두리 반경을 설정하여 버튼의 둥근 모서리를 만듭니다.
• 5px 길이의 회색 상자 그림자를 설정하고 버튼 아래에 표시합니다.

사용자가 커서로 버튼을 가리키지 않을 때 버튼의 스타일을 설정합니다. .button:active 스타일에서 우리는:

• 버튼의 배경색을 연한 분홍색으로 설정합니다.
• 5px 길이로 버튼 아래에 나타나는 밝은 회색 그림자를 설정합니다.
• 버튼이 눌린 것처럼 보이게 하는 translateY() 변환을 설정합니다. Career Karma CSS 2D 변환 가이드에서 이 전환에 대해 자세히 알아볼 수 있습니다.

이러한 스타일을 사용하면 사용자가 버튼 위로 마우스를 가져갈 때 트리거되는 효과를 만들 수 있습니다.

페이드인

전환 및 불투명도 속성을 사용하여 버튼에 페이드 인 효과를 만들 수 있습니다. :hover 선택기와 결합하면 사용자가 개체(이 경우 버튼) 위로 마우스를 가져갈 때 페이드 인 효과가 활성화됩니다.

페이드 인 버튼을 만드는 데 사용할 수 있는 코드는 다음과 같습니다.

.button {
   padding: 20px;
   font-size: 15px;
   color: white;
   background-color: lightblue;
   border: none;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
   border-radius: 8px;
   opacity: 0.7;
}

.button:hover {
  opacity: 1;
}

코드 결과는 다음과 같습니다.

왼쪽에서 버튼이 더 투명해 보이는 것을 볼 수 있습니다. opacity 속성 값을 0.7로 설정한 결과입니다.

사용자가 버튼 위로 마우스를 가져가면 .button:hover CSS 속성의 내용을 읽어 버튼의 불투명도를 1로 설정합니다. 이렇게 하면 버튼이 완전히 불투명해집니다(투명하지 않음).

결론

HTML은 웹 페이지의 버튼 구조를 정의합니다. 버튼을 정의하고 나면 CSS를 사용하여 필요에 따라 사용자 정의할 수 있습니다.

이 튜토리얼에서는 여러 인기 있는 CSS 속성을 사용하여 버튼의 스타일을 지정하는 방법을 예제와 함께 설명했습니다. 이제 전문 웹 개발자처럼 CSS를 사용하여 버튼 스타일 지정을 시작할 준비가 되었습니다!