본문 바로가기
카테고리 없음

블로그 작성할 때, 버튼 만드는 법

by Life Level up 2024. 11. 10.
반응형

 

 

블로그 포스트에 버튼을 추가하고 싶다면, HTML과 CSS를 사용해 스타일을 지정할 수 있습니다. 아래는 기본적인 버튼 코드를 제공하며, 이를 블로그 플랫폼에 맞게 조정할 수 있습니다.

HTML 버튼 코드 예시

 

 

 

<a href="https://your-link.com" class="button">버튼 텍스트</a>

 

 

CSS 스타일 예시

아래 CSS 코드는 버튼을 스타일링합니다.

 


<style>
.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #4CAF50; /* 버튼 색상 */
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #45a049; /* 마우스 오버 시 색상 */
}
</style>

 

 

위 코드를 적용하면 녹색 버튼이 생성되며, 버튼을 클릭할 때 href 속성의 링크로 이동하게 됩니다. CSS 색상과 텍스트는 필요에 따라 변경할 수 있습니다.

반응형