티스토리 블로그 : 항상 따라다니는 링크버튼 스타일 3번

 

 

링크버튼 스타일

지난번에는 링크버튼에 색상이 변하는 그림자스타일의 버튼을 소개해 드렸었습니다. 이번에는 버튼의 색상자체가 변화하는 스타일의 버튼을 소개해드리니 적용을 원하는분들은 아래의 글을 계속해서 읽어보세요. 

 

고급 마우스 손목받침대로 내 손목을 지켜주세요. 3600여개의 상품평을 먼저 확인해봐요.

 

 

 

링크버튼 스타일 3번 적용하기

링크버튼을 처음 적용하시는 분들은 아래의 링크로 이동해서 링크버튼을 적용하는 방법에 대한 글을 모두 확인해보고 이 글을 읽기를 추천드립니다.

 

링크버튼 적용글 바로가기

 

 

위의 글을 읽고 적용했다면 기본적인 검정색버튼이 적용되어 있을겁니다. 나는 이 버튼의 색상이 싫다 하시는 분들은 css코드에서 원하는 색상으로 변경하여 사용하셔도 되고 버튼 자체의 색상이 계속해서 변화되는 버튼을 적용하고 싶다 하시는 분들은 아래의 코드를 그대로 복사하여 자신의 블로그 css편집창에서 먼저 적용했던 코드를 삭제하고 아래의 코드를 넣어서 적용하시면 됩니다.

 

/* 플로팅 버튼 3 시작 */
/* 콤마군 https://commagun.tistory.com/ */
.float-button-container {
    z-index: 1000; /* 다른 요소들보다 앞에 배치되도록 설정 */
    position: fixed; /* 스크롤해도 화면의 고정된 위치에 버튼이 위치하도록 설정 */
    left: 50%; /* 화면의 수평 중앙에 배치 */
    bottom: 140px; /* 화면의 아래에서 140px 위로 배치 */
    transform: translateX(-50%); /* 정확히 가운데 정렬되도록 설정 */
    display: flex; /* 플렉스 박스를 사용하여 내부 요소를 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    padding: 0 10px; /* 좌우 여백 설정 */
    height: 60px; /* 높이 설정 */
    border-radius: 12px; /* 모서리를 둥글게 설정 */
}

.float-button {
    width: auto; /* 버튼의 너비를 자동으로 설정 */
    max-width: calc(100% - 40px); /* 최대 너비를 화면 너비에서 40px 뺀 값으로 설정 */
    margin: 0 auto; /* 수평 중앙 정렬 */
    box-shadow: 0px 10px 14px -7px #000000; /* 그림자 설정 */
    border-radius: 10px; /* 모서리를 둥글게 설정 */
    display: block; /* 블록 요소로 설정 */
    cursor: pointer; /* 마우스 커서가 포인터로 변경 */
    color: #ffffff !important; /* 글자색을 흰색으로 고정하고 중요도 높임 */
    text-shadow: 
        -1px -1px 0 #2a2b2a, /* 왼쪽 위 */
         1px -1px 0 #2a2b2a, /* 오른쪽 위 */
        -1px  1px 0 #2a2b2a, /* 왼쪽 아래 */
         1px  1px 0 #2a2b2a; /* 오른쪽 아래 */
    font-family: Arial, sans-serif; /* 글꼴을 Arial로 설정, 대체 글꼴 추가 */
    font-size: 20px; /* 폰트 크기 설정 */
    font-weight: bold; /* 글자 굵기를 볼드체로 설정 */
    padding: 20px 40px; /* 패딩 설정 (위아래 20px, 좌우 40px) */
    text-decoration: none !important; /* 텍스트의 밑줄 제거하고 중요도 높임 */
    text-align: center; /* 텍스트를 중앙 정렬 */
    transition: transform 0.2s; /* 트랜지션 효과 설정 */
    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
    background: linear-gradient(270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff00ff); /* 추가된 색상으로 초기 그라데이션 설정 */
    background-size: 1400% 1400%; /* 그라데이션 크기 설정 */
    animation: gradientAnimation 15s ease infinite; /* 그라데이션 애니메이션 설정 */
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    14% {
        background-position: 14% 50%;
    }
    28% {
        background-position: 28% 50%;
    }
    42% {
        background-position: 42% 50%;
    }
    56% {
        background-position: 56% 50%;
    }
    70% {
        background-position: 70% 50%;
    }
    84% {
        background-position: 84% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.float-button:hover {
    transform: translateY(-5px); /* 버튼이 5px 위로 이동 */
    box-shadow: 0px 10px 14px -7px #333333; /* 그림자 색상을 약간 밝게 변경 */
}

.float-button:active {
    position: relative; /* 부모 요소에 상대적인 위치 설정 */
    top: 1px; /* 클릭 시 버튼이 1px 아래로 이동 */
}

/* 모바일 화면 전용 스타일 */
@media screen and (max-width: 768px) {
    .float-button {
        font-size: 4vw; /* 모바일 화면에서 폰트 크기를 화면 너비의 4%로 설정 */
        padding: 15px 20px; /* 패딩을 줄여서 텍스트가 한 줄에 나오도록 설정 (위아래 15px, 좌우 20px) */
    }
}
/* 플로팅 버튼 3 끝 */

 

 

 

위의 코드를 복사하기 어렵다면 아래의 txt파일을 다운로드 받아 열어서 코드를 복사하여 css편집창에 붙여넣기 하시면 적용됩니다.

 

링크버튼스타일3번.txt

0.00MB

 

 

 

이렇게 간단하게 코드만 붙여넣기 하시면 아래의 이미지처럼 버튼자체의 색상이 계속해서 변화하는 링크버튼을 완성할 수 있습니다. 저는 이 버튼을 글을 쓸때 꼭 필요한 링크주소를 넣기도 하고 그외 특별한 링크가 없을 경우 쿠팡파트너스등을 위한 링크버튼으로도 활용중입니다. 

 

 

 

 

고급 마우스 손목받침대로 내 손목을 지켜주세요. 3600여개의 상품평을 먼저 확인해봐요.

 

 

 

 

관련링크

 

이 글의 썸네일처럼 나도 쉽게 썸네일을 만들어보고싶다 생각하면 클릭

 

내 썸네일도 만들어보기

 

 

이 블로그에 쓰인 스킨 다운로드 받아서 내 블로그에 적용해보기

 

이 스킨 다운로드

 

 

 

관련글

이 글과 비슷한 관련 카테고리의 글을 함께 읽어보세요. 도움이 되는 정보가 많이 준비되어 있습니다.

 

티스토리 블로그 : 항상 따라다니는 링크버튼의 수정과 다른 스타일보기

티스토리 블로그 : 항상 따라다니는 링크버튼의 수정과 다른 스타일보기

 

티스토리 블로그 애드센스 수익을 높일 수 있는 항상 따라다니는 링크버튼 넣기

티스토리 블로그 애드센스 수익을 높일 수 있는 항상 따라다니는 링크버튼 넣기

 

티스토리 블로그에 글을 복사,붙여넣기 할 때   코드 삭제해주는 사이트

티스토리 블로그에 글을 복사,붙여넣기 할 때   코드 삭제해주는 사이트

 

 

 

참고하세요

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 쿠팡, 알리익스프레스등의 파트너스 활동으로 인한 수익금을 얻는 링크가 있습니다.
· 이 블로그의 홈으로 가시려면 여기를 누르셔도 됩니다.

 

📣 고급 마우스 손목받침대 구경하기