HTML 보기 편집 모드에서 변경 해야함

리카수니 다운받는 링크표시를 버튼으로 변경하는 예시입니다.

기존 표시

<h1 style="text-align: left;"><a href="https:// ~~~

→ 변경된 됨

<h1 style="text-align: left;"><a class="button download yellow"href

원하시는 종류 선택해서 이용하시면 됩니다.

<a class="button green" href="https://www.vietrick.com/" target="_blank">Default</a>

<a class="button preview red" href="https://www.vietrick.com/" target="_blank">Preview</a>

<a class="button download yellow" href="https://www.vietrick.com/" target="_blank">Download</a>

<a class="button share orange" href="https://www.vietrick.com/" target="_blank">Share</a>

<a class="button white preview" href="https://www.vietrick.com/" target="_blank">Preview</a>

리카수니 블로그에 적용된 모습

버튼 크기 조정

기존값 (삭제)

.post-body a.button{display:inline-block;height:36px;background-color:var(--button-bg);font-family:var(--body-font);font-size:14px;color:var(--button-color);font-weight:400;line-height:36px;text-align:center;text-decoration:none;cursor:pointer;padding:0 20px;margin:0 6px 8px 0;border-radius:36px}

.button:before{float:left;font-family:bootstrap-icons;font-weight:400;display:inline-block;margin:0 8px 0 0}

변경값

.post-body a.button{display:inline-block;height:54px;background-color:var(--button-bg);font-family:var(--body-font);font-size:21px;color:var(--button-color);font-weight:400;line-height:54px;text-align:center;text-decoration:none;cursor:pointer;padding:0 30px;margin:0 9px 12px 0;border-radius:54px}

.button:before{float:left;font-family:bootstrap-icons;font-weight:400;display:inline-block;margin:0 12px 0 0;font-size:21px}

Vtrick 테마 버튼 적용하기

HTML 보기 편집 모드에서 변경 해야함