티스토리 글쓰기 버튼 만들기

결과물

글쓰기

동기

티스토리 스킨에 따라서 블로그 관리페이지를 제외한

블로그 메인화면, 블로그 게시물화면에 글쓰기 버튼이 없어서

글 쓰기위해서 관리페이지로 들어가야하는 불편함이 있어서

글쓰기 버튼을 만들었다

 

티스토리 관리 페이지에서 스킨편집을 누르면 html, css를 수정할 수 있다.

페이지 아래쪽에 글쓰기 버튼을 만들기 위해서

<div class="info_tistory">
  <div class="profile_tistory" style="display: block">
    <a href="/manage/post" class="w-btn w-btn-gra w-btn-gra-anim">글쓰기</a>
  </div>
</div>

위의 코드처럼 해당 div안에 <a>태그를 넣어줬다

 

그리고 아래처럼 css를 작성했다

.w-btn {
    position: relative;
    border: none;
    display: inline-block;
    padding: 15px 30px;
    border-radius: 80px;
    font-family: "paybooc-Light", sans-serif;
    box-shadow: 11px 8px 18px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s;
}

.w-btn:active {
    transform: scale(1.5);
}

.w-btn:hover {
    letter-spacing: 2px;
    transform: scale(1.2);
    cursor: pointer;
}

.w-btn-gra {
    background: linear-gradient(-45deg, #FBEFF8,#F6CEF5, #DA81F5,#D358F7 , #9A2EFE );
    color: black;
}

.w-btn-gra-anim {
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

 

참고 : https://velog.io/@whdnjsdyd111/CSS-%EB%B2%84%ED%8A%BC-%EC%9D%B4%EC%81%98%EA%B2%8C-%EA%BE%B8%EB%AF%B8%EA%B8%B0