CSS로 투명한 배경과 스트로크 버튼 만들기

by

웹사이트에 멋진 버튼을 추가하고 싶으신가요? CSS를 사용하면 투명한 배경과 세련된 스트로크 테두리를 가진 버튼을 쉽게 만들 수 있습니다. 아래는 간단한 방법을 안내합니다.

CSS 스타일링

먼저, CSS를 사용해 버튼의 스타일을 설정합니다. 투명한 배경, 검정색 테두리, 그리고 마우스 오버 시 색상 변화를 줍니다.

.transparent-button {
  background-color: transparent; /* 투명 배경 */
  border: 2px solid #000000; /* 검정색 테두리 */
  color: #000000; /* 검정색 텍스트 */
  padding: 10px 20px; /* 적당한 패딩 */
  border-radius: 5px; /* 둥근 테두리 */
  cursor: pointer; /* 마우스 오버 시 커서 */
  transition: all 0.3s ease 0s; /* 부드러운 효과 */
}

.transparent-button:hover {
  background-color: #dddddd; /* 마우스 오버 시 배경색 변경 */
}

HTML에 적용하기

그 다음, HTML 요소에 클래스를 적용합니다.

<button class="transparent-button">클릭하세요</button>

완성!

ai를 이용해서 전생을 그려주는 앱인 조선셀피를 알려주는 그림

이렇게 하면, 웹 페이지에 멋진 투명한 배경과 스트로크 버튼이 추가됩니다. 원하는 대로 스타일을 조정해 보세요. 색상, 크기, 테두리 두께 등을 변경하여 나만의 스타일을 만들 수 있습니다.

Leave a Comment