CSS에서 원형 버튼 만들기

이 기사에서는 CSS에서 원형 버튼을 만드는 방법을 소개합니다.

border-radius 속성을 사용하여 CSS에서 원형 버튼 생성

border-radius 속성을 사용하여 CSS에서 원형 버튼을 만들 수 있습니다. 속성은 요소의 모서리에 반경을 추가하여 선택한 요소에 둥근 모서리를 만듭니다.

border-radius 속성은 1~4개의 값을 옵션으로 사용합니다. 아래의 예를 살펴보겠습니다.

4개의 값이 있는 border-radius에서 초기 값은 왼쪽 상단 모서리에 적용되고 두 번째 값은 오른쪽 상단 모서리에 적용되고 세 번째 값은 오른쪽 하단 모서리에 적용되며 최종 값은 하단 모서리에 적용됩니다. 왼쪽 모서리.

border-radius: 12px 50px 20px 5px

세 값의 경우 초기 값은 왼쪽 상단 모서리에 적용되고 두 번째 값은 오른쪽 상단 및 왼쪽 하단 모서리에 적용되며 최종 값은 오른쪽 하단 모서리에 적용됩니다.

border-radius: 12px 50px 20px

초기 값은 두 값에서 왼쪽 위 모서리와 오른쪽 아래 모서리에 적용되고 후자는 오른쪽 위 모서리와 왼쪽 아래 모서리에 적용됩니다.

border-radius: 12px 50px

단일 반경이 설정되면 요소의 모든 모서리에 적용되어 원형 모서리를 만듭니다.

border-radius: 12px

border-radius 속성을 사용하여 border-radius를 버튼 높이와 너비의 정확히 절반으로 제공하여 완벽한 원형 버튼을 만들 수 있습니다. 데모를 위해 border-radius라는 단일 값을 사용할 수 있습니다.

예를 들어 HTML에서 button 태그를 사용하여 버튼을 만듭니다. 버튼 안에 여기를 클릭하십시오라는 텍스트를 작성하십시오.

이제 CSS에서 버튼을 선택하고 버튼의 height와 width를 200px로 지정합니다. 그런 다음 border-radius를 50% 또는 100px로 지정합니다.

우리가 입력한 100px border-radius는 버튼 높이와 너비의 절반입니다. 결과적으로 버튼의 각 모서리는 측면 길이의 반지름의 절반으로 둥근 모서리를 형성합니다.

단순화하기 위해 border-radius에 50% 값을 사용할 수 있습니다. 따라서 CSS의 border-radius 속성을 사용하여 원형 버튼을 만들었습니다.

예제 코드:

<button> Click here </button>

button {
 height: 200px;
 width: 200px;
 border-radius: 100px;
}

button {
 height: 200px;
 width: 200px;
 border-radius: 50%;
}