둥근 버튼 만들기 CSS로 표현 한 것을 기록형으로 포스팅 합니다. 이전 이쁜 박스 공지사항 만들기와 함께 적용 해본 코드 입니다. 아래와 같이 둥근 모퉁이 버튼으로 가로 60% 폭과 가운데 정렬을 적용 했습니다.
둥근 버튼 만들기 CSS 코드
<span class="gb-button" style="border-radius: 20px; display: block; margin: 0 auto; width: 60%; text-align: center; padding: 10px; background-color: #4CAF50; text-decoration: none; cursor: pointer; transition: background-color 0.3s;"><a href="https://knowentrepreneurs.com/guest-post/" style="color: white;">작성하기 | Guest Post</a></span>CSS 코드 설명
둥근 버튼 만들기 CSS 코드는 다음과 같이 작동합니다:
1. `border-radius: 20px;`: gb-button 클래스를 가진 요소의 테두리를 둥글게 만듭니다. 20px 값은 둥근 정도를 나타냅니다.
2. `display: block;`: gb-button 클래스를 가진 요소를 블록 레벨 요소로 설정하여, 다른 요소와 수직으로 정렬됩니다.
3. `margin: 0 auto;`: gb-button 클래스를 가진 요소를 수평으로 가운데 정렬합니다.
4. `width: 60%;`: gb-button 클래스를 가진 요소의 너비를 부모 요소의 60%로 설정합니다.
5. `text-align: center;`: gb-button 클래스를 가진 요소 내의 텍스트를 가운데 정렬합니다.
6. `padding: 10px;`: gb-button 클래스를 가진 요소의 안쪽 여백을 10px로 설정합니다.
7. `background-color: #4CAF50;`: gb-button 클래스를 가진 요소의 배경색을 #4CAF50으로 설정합니다.
8. `text-decoration: none;`: gb-button 클래스를 가진 요소 내의 링크 텍스트에 밑줄을 없앱니다.
9. `cursor: pointer;`: gb-button 클래스를 가진 요소에 마우스 커서를 포인터로 변경합니다.
10. `transition: background-color 0.3s;`: gb-button 클래스를 가진 요소의 배경색이 변경될 때의 전환 효과를 0.3초 동안 적용합니다.
내부의 `<a>` 요소에 대한 스타일은 다음과 같이 작동합니다:
1. `color: white;`: `<a>` 요소의 텍스트 색상을 흰색으로 설정합니다.
이 CSS 코드는 gb-button 클래스를 가진 요소를 하나의 버튼으로 만들어줍니다. 버튼의 모양, 크기 및 색상을 설정하여 사용자가 클릭할 수 있도록 만들어줍니다.CSS 분리하기
만약 CSS를 html과 분리한다면 아래와 같이 할 수 있습니다. 원래 코드 분리가 추후 작업을 위해서라도 권장되는 것이 기본입니다.
.gb-button {
border-radius: 20px;
display: block;
margin: 0 auto;
width: 60%;
text-align: center;
padding: 10px;
background-color: #4CAF50;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s;
}
.gb-button a {
color: white;
}
<span class="gb-button"><a href="https://knowentrepreneurs.com/guest-post/">작성하기 | Guest Post</a></span>
