티스토리 버튼 만들기 - CSS 링크 사각박스 글쓰기

티스토리 버튼 만들기 - CSS 링크 사각박스 글쓰기 

티스토리 블로그를 운영하면서 블로그 글에 더 많은 시각적 효과와 상호작용을 추가하고 싶을 때가 있습니다. 이를 위해 링크 버튼을 만들어 마우스를 가져다 대면 색상이 바뀌고 클릭을 유도하는 효과를 원할 수 있습니다. 이런 버튼을 만들려면 티스토리의 CSS 스타일을 수정하여 버튼 태그를 추가하고, 그 다음에는 글을 쓸 때 HTML 코드를 사용하여 해당 스타일을 가진 티스토리 버튼을 만들 수 있습니다.

티스토리 블로그를 더 독특하게 꾸미고 사용자들에게 더 나은 경험을 제공하기 위해 CSS를 사용하는 것은 매우 중요합니다. 이러한 CSS를 활용하여 버튼을 만들고 디자인하는 과정은 여러분의 블로그에 독특한 스타일과 기능을 추가하는 데 큰 도움이 될 것입니다. 더불어 티스토리 버튼을 만들 때 HTML을 사용하면 해당 버튼을 글에 자유롭게 삽입할 수 있어 블로그 글을 더 매력적으로 만들 수 있습니다.

버튼 디자인과 CSS 스타일링을 통해 티스토리 블로그 글에 더 많은 인상을 남길 수 있으며, 사용자들에게 더 나은 시각적 경험을 제공할 수 있습니다. 이를 통해 블로그의 전반적인 품질을 향상시키고 독자들과의 상호작용을 증가시킬 수 있습니다. 따라서 CSS를 사용하여 티스토리 버튼을 만드는 방법을 배우고, 여러분의 블로그에 적용하여 블로그를 더 독특하고 매력적으로 만들어보세요.

티스토리 CSS 수정 버튼 만들기

우선 티스토리 HTML 편집으로 이동 후 아래 CSS태그를 가장 하단에 추가합니다.

/* 새로운 디자인 버튼 스타일 */
.click-me-button {
  display: inline-block;
  background-color: #E63946; /* 배경색 변경 */
  border: none;
  color: #F1FAEE !important; /* 글자색 변경 */
  text-align: center;
  font-size: 18px; /* 글자 크기 조정 */
  padding: 20px 30px; /* 버튼 크기 조정 */
  border-radius: 25px; /* 더 둥근 버튼 모양 */
  transition-duration: 0.4s;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none; /* 링크 밑줄 제거 */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
}

.click-me-button:hover {
  background-color: #A8DADC; /* 마우스 호버시 배경색 변경 */
  color: #1D3557 !important; /* 마우스 호버시 텍스트 색상 변경 */
  font-weight: bold;
  transform: scale(1.05); /* 호버시 약간 확대 효과 */
}

여기서 마우스 호버시 색상 및 텍스트 색상등은 원하는 컬러로 변경해도 되며 이때 사용할 CSS 색상코드는 아래 참고하세요

티스토리 CSS 수정문구.txt

0.00MB

해당코딩이 복사가 안된다면 위 메모장을 받아 사용하세요

웹사이트 CSS 배경색 텍스트 색상코드 - 티스토리 워드프레스 HTML

티스토리 버튼 만들기 CSS를 추가했다면 이제 링크버튼을 만들 HTML 태그를 서식에 저장해놓고 필요할때마다 가져와서 사용할 수 있습니다.

티스토리 서식 저장하기

티스토리 서식으로 이동 후 서식쓰기를 선택합니다.

이후 아래 HTML 태그를 복사해서 HTML 모드로 변경한 상태에서 붙여넣기한 다음 저장합니다.

<a class="click-me-button" href="https://www.naver.com" target="_blank" rel="noopener">클릭하세요!</a>

이후 저장 한 뒤 티스토리 버튼을 추가하고 싶을때 마다 서식에서 버튼만들기를 가져옵니다.

티스토리 버튼 html태그.txt

0.00MB

해당 HTML 코드는 위 메모장에 있습니다.

티스토리 글쓰기 링크박스 추가하기

이후 사각박스에 들어갈 문구와 링크를 수정합니다.

티스토리 잡가이버 사각벅스 버튼 만들기

이때 실제로 티스토리 글쓰기 상태에서는 보이지 않지만 미리보기나 실제 글을 발행하고 나면 사각박스가 보입니다.

이상 티스토리의 CSS와 HTML 을 사용해 티스토리 글쓰기에서 사각박스의 링크박스를 만드는 방법을 알아보았습니다.