• Blog/Tistory

  • 하이퍼링크 마우스 호버 CSS 애니메이션 효과 7가지 모음

  • 유쿠_ 유쿠_ · ·

하이퍼링크 호버 효과 적용

웹사이트의 사용자 경험은 방문자가 사이트에 머무는 시간과 깊은 관련이 있습니다. 이때 하이퍼링크에 적용되는 다양한 마우스 호버 효과는 단순한 링크를 시각적으로 더욱 매력적으로 변모시켜, 방문자의 관심을 끌고 클릭을 유도하는 중요한 역할을 합니다. 이러한 CSS 효과들은 웹사이트 디자인의 품질을 높일 뿐만 아니라, 사용자와의 상호작용을 더욱 풍부하게 만들어 줍니다.

특히, 매력적인 호버 효과는 사용자가 링크에 마우스를 올렸을 때 즉각적인 반응을 제공하여, 시각적 즐거움을 더하고, 탐색의 재미를 높이는 데 기여합니다. 이 글에서는 하이퍼링크 마우스 호버 CSS 코드 7가지를 제공합니다.

CSS 효과 적용 모습 확인

See the Pen Untitled by HYUNBUM CHO (@HYUNBUM-CHO) on CodePen.

하이퍼링크 호버 CSS 효과 7가지

다양한 하이퍼링크 호버 효과를 준비했습니다. 아래의 효과 중 마음에 드시는 것을 복사하여 붙여 넣기 하시면 간편하게 사용할 수 있습니다.

  1. 무지개 효과
  2. 밑줄 물결 효과
  3. 그라데이션 효과
  4. 그라데이션 효과 2
  5. 그라데이션 효과 3
  6. 그라데이션 효과 4
  7. 버튼 스타일 효과

효과를 선택하여 쉽게 적용해 보세요.

CSS 효과 적용 방법

원하는 하이퍼링크의 CSS 코드를 적용하는 방법은 매우 간단합니다. 아래의 단계를 따라 하시면 손쉽게 멋진 효과를 추가하실 수 있습니다.

  1. 관리자 페이지에 로그인: 먼저, 귀하의 웹사이트 관리자 페이지에 로그인합니다.
  2. 스킨 편집으로 이동: 로그인 후, 스킨편집을 선택합니다.
  3. CSS 탭 선택: 스킨 편집 화면에서 'CSS' 탭을 클릭하여 CSS 편집기로 이동합니다.
  4. 코드 삽입: CSS 탭의 적당한 부분에 원하는 하이퍼링크 호버 효과의 CSS 코드를 붙여 넣습니다.
  5. 변경 사항 저장: 모든 코드를 입력한 후, 변경 사항을 저장하여 적용합니다.

이렇게 간단한 단계만으로도 독특하고 매력적인 하이퍼링크 효과를 추가할 수 있습니다.

무지개 효과

무지개 효과 CSS는 하이퍼링크에 마치 무지개처럼 변화하는 다채로운 색상을 적용하여, 시각적으로 매력적인 효과를 제공합니다. 만약 티스토리에서 제공하는 무지개 링크 플러그인을 사용하고 계신다면, 별도로 이 무지개 효과 CSS 코드를 적용하지 않으셔도 됩니다. 플러그인만으로도 충분히 같은 효과를 즐기실 수 있습니다.

/* 무지개 효과 애니메이션 */
.contents_style p a {
  color: #3E5898;
  position: relative;
  transition: color 0.5s ease;
}

.contents_style p a:hover {
  color: #FF0000;
  animation: rainbow 1.5s linear infinite;
  text-decoration: none !important; 
}

@keyframes rainbow {
  0% { color: #FF0000; }
  15% { color: #FF7F00; }
  30% { color: #FFFF00; }
  45% { color: #00FF00; }
  60% { color: #0000FF; }
  75% { color: #4B0082; }
  90% { color: #8B00FF; }
  100% { color: #FF0000; }
}

밑줄 물결 효과

밑줄 물결 효과 CSS는 하이퍼링크에 마우스를 올릴 때, 밑줄이 물결처럼 부드럽게 움직이는 매력적인 애니메이션을 제공합니다. 이 효과는 단순한 밑줄을 넘어, 방문객에게 시각적으로 신선하고 흥미로운 경험을 선사합니다. 물결 효과는 웹사이트의 디자인에 활력을 불어넣어 주며, 사용자의 시선을 집중시키는 데 도움을 줍니다. 이 CSS 코드를 적용하면, 클릭을 유도하는 강력한 비주얼 요소로 작용하여, 방문자의 관심을 끌고 사이트에 머무는 시간을 늘릴 수 있습니다.

/* 물결 밑줄 효과*/
.contents_style p a {
    background: linear-gradient(to bottom, #ff9800 0%, #ff9800 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 3px;
    color: #4272d7 !important;
    text-decoration: none !important;
    padding: 0px 1px 5px 1px;
}

.contents_style p a:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    background-position: 0 100%;
    background-size: auto 6px;
    background-repeat: repeat-x;
    text-decoration: none !important;
}

그라데이션 효과

그라데이션 효과 CSS는 하이퍼링크에 마우스를 올릴 때, 좌측에서 우측으로 부드럽게 변화하는 그라데이션 배경색상을 적용하여 시각적인 매력을 더하는 애니메이션 효과입니다. 이 효과는 단조로운 링크에 생동감을 불어넣어 주며, 방문객의 시선을 사로잡는 데 효과적입니다.

/*그라데이션 효과*/
.contents_style p a {
    color: #4272d7 !important;
    position: relative;
    text-decoration: underline;
    padding: 3px 2px;
}

.contents_style p a:hover {
    color: #fff !important;
    text-decoration: none !important;   
}

.contents_style p a::before {
    background-image: linear-gradient(to right, #fc00ff 0%, #f9d423 100%);
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-in-out;
    z-index: -1;
    border-radius: 5px; 
}

.contents_style p a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

그라데이션 효과 2

하이퍼링크 마우스 호버시 그라데이션 2 배경은 다양한 색상의 조화를 통해 더욱 돋보이게 만들어, 웹사이트의 전체적인 디자인에 깊이와 풍부함을 추가합니다. 이 CSS 코드를 활용하면, 링크에 마우스를 올렸을 때 시각적으로 매력적인 변화를 경험할 수 있어 사용자 인터랙션을 더욱 즐겁게 합니다.

/*그라데이션 효과 2*/
.contents_style p a {
    color: #4272d7 !important;
    position: relative;
    text-decoration: underline;
    padding: 3px 2px;
}

.contents_style p a:hover {
    color: #fff !important;
    text-decoration: none !important;   
}

.contents_style p a::before {
    background-image: linear-gradient(to right, rgb(110, 231, 183), rgb(59, 130, 246), rgb(147, 51, 234)); /* 그라데이션 색상 */
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-in-out;
    z-index: -1;  
    border-radius: 5px;
}

.contents_style p a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

그라데이션 효과 3

그라데이션 효과 3은 하이퍼링크에 마우스를 올릴 때, 아래에서 위로 부드럽게 올라오는 배경색상을 적용하는 매력적인 애니메이션 효과입니다. 이 효과는 링크에 생동감을 부여하며, 사용자에게 시각적으로 흥미로운 경험을 제공합니다.

/*그라데이션 효과 3*/
.contents_style p a {
    word-break: break-all;
    color: #3E5898 !important;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
    background-image: linear-gradient(135deg, #50cc7f, #f5d100);
    transition: all .25s ease-in;
    padding: 3px 2px;
    text-decoration: none !important;
}

.contents_style p a:hover {
    background-size: 100% 100%;
    color: #000 !important;
    border-radius: 5px;
}

그라데이션 효과 4

배경색이 아래에서 위로 상승하는 동작은 마치 링크가 활성화되는 듯한 느낌을 주어, 방문객의 클릭 욕구를 자극합니다. 이 CSS 코드를 적용하면, 웹사이트의 인터페이스가 더욱 현대적이고 세련되게 변모하며, 사용자와의 상호작용을 한층 더 매력적으로 만들어줍니다.

/*그라데이션 효과 4*/
.contents_style p a {
    word-break: break-all;
    color: #3E5898 !important;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
    background-image: linear-gradient(to right, #6a11cb, #2575fc);
    transition: all .25s ease-in;
    padding: 3px 2px;
    text-decoration: none !important;
}

.contents_style p a:hover {
    background-size: 100% 100%;
    color: #fff !important;
    border-radius: 5px;
}

버튼 스타일 효과

버튼 스타일 효과는 하이퍼링크에 마우스를 올릴 때, 링크가 버튼처럼 변환되는 매력적인 애니메이션 효과를 제공합니다. 이 효과는 링크를 클릭하기 쉽게 만들어 주며, 사용자에게 직관적인 인터페이스를 제공합니다.

/*버튼 스타일 효과*/
.contents_style p a::before {
    content: ' ';
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: -2px;
    padding: 0 2px;
    width: calc(100% + 2px);
    height: 1px;
    transition: 0.4s;
}

.contents_style p a::after {
    content: ' ';
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: calc(50% - 4px);
    padding: 0 2px;
    width: 0;
    height: 0;
    border: 1px solid transparent;
    transition: 0.4s;
}

.contents_style p a:hover::before {
    border-color: transparent;
}

.contents_style p a:hover::after {
    width: 100%;
    height: 1.25em;
    left: -1em;
    bottom: -0.3em;
    padding: 0.5em 1em;
    border-color: #fc5d43;
    background-color: #fc5d43;
    border-radius: 2.5em;
}

.contents_style p a {
    color: #3E5898 !important;
    display: inline-block;
    transition: 0.3s;
    transition-delay: 0s;
    transform: scale(1);
}

.contents_style p a:hover {
    color: #fff !important;
    transform: scale(1.2);
    transition-delay: 0.11s;
    text-decoration: none !important; 
}

마무리

다양한 하이퍼링크 마우스 호버 CSS 효과를 살펴보았습니다. 각 효과는 독특한 시각적 매력을 제공하며, 웹사이트의 디자인을 한층 더 돋보이게 만들어 줍니다. 무지개 효과, 밑줄 물결 효과, 여러 가지 그라데이션 효과, 그리고 버튼 스타일 효과까지, 여러분의 웹사이트에 적합한 효과를 선택하여 간편하게 적용할 수 있습니다. 이러한 효과들은 단순히 시각적인 요소를 넘어서, 사용자 경험을 향상하는 중요한 요소입니다. 방문객의 관심을 끌고, 클릭을 유도하여 사이트의 상호작용을 증가시키는 데 기여할 것입니다.

이제 여러분의 웹사이트에 이 멋진 효과들을 적용하여, 더욱 매력적이고 현대적인 디자인을 완성해 보세요. 감사합니다.

'Blog/Tistory' 카테고리의 다른 글
another_article
2024.11.20

티도리 프레임워크를 활용해서 티스토리 스킨을 만들기

another_article
2024.11.19

티스토리 스킨 커스텀 할때 참고하면 좋은 디자인 모음

another_article
2024.11.14

티스토리 콘텐츠가 서서히 등장하는 Fade-in 효과 추가하기

another_article
2024.11.13

티스토리 블로그 상단 진행바(Progress Indicator) 만들기

유쿠_
유쿠_
여러 가지 유익한 콘텐츠를 다루며, 생산적인 활동을 도모하는 YOUKU입니다.
Community
comment
100%

티스토리툴바