• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Красивый эффект при наведении на ссылку (Здесь самые интересные ховер эффекты для ссылок на сайт)
Красивый эффект при наведении на ссылку
Kosten
Понедельник, 18 Июня 2012 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Следует помнить, что между внутренними и внешними ссылками существует большая разница, и они служат разным целям для вашей контент-стратегии. И то, и другое важно и полезно как для ваших читателей, так и для того, чтобы помочь вам получить те результаты поиска, которые вам нужны, но они полезны по самым разным причинам.

Ссылки также обеспечивают более глубокое восприятие для ваших читателей, приводя к дополнительной или связанной информации, которая не дублирует информацию в вашем блоге, а вместо этого добавляет дополнительные уровни значения и контекста. Умное и продуманное включение ссылок подчеркивает доверие к вашему блогу и может улучшить вашу репутацию лидера.

Скрипт:
Код
<style type="text/css">A:hover{background:url(Ссылка на эффект);}</style>

Приступаем к установке:
Просто ставим скрипт в любое место с дизайном
Сами эффекты































Страна: (RU)
Kosten
Вторник, 05 Ноября 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Ссылки являются строительными блоками Интернета. Ознакомьтесь с этими креативными и современными эффектами, которые можно использовать для добавления удивительных эффектов при наведении курсора на ссылки или пункты меню. Найти вдохновение для творческих эффектов наведения ссылки.

Это действительно потрясающий эффект при наведении на ссылки, использующий CSS, он создает эффект поп-эффекта в стиле комиксов со строками, когда вы наводите курсор мыши на ссылки.



HTML

Код
<section class="bg-color-1">
   <h2>Эффект №1 Класс: iw-effect-1</h2>
    <nav class="he-nav iw-effect-1">
     <a href="#">Главная</a>
     <a href="#">Продукция</a>
     <a href="#">О нас</a>
     <a href="#">Новости</a>
     <a href="#">Контакты</a>
    </nav>
   </section>
   
   <section class="bg-color-2">
   <h2>Эффект №2 Класс: iw-effect-2</h2>
    <nav class="he-nav iw-effect-2">
     <a href="#">Главная</a>
     <a href="#">Продукция</a>
     <a href="#">О нас</a>
     <a href="#">Новости</a>
     <a href="#">Контакты</a>
    </nav>
   </section>

   <section class="bg-color-3">
   <h2>Эффект №3 Класс: iw-effect-3</h2>
    <nav class="he-nav iw-effect-3">
     <a href="#">Главная</a>
     <a href="#">Продукция</a>
     <a href="#">О нас</a>
     <a href="#">Новости</a>
     <a href="#">Контакты</a>
    </nav>
   </section>
   
   <section class="bg-color-4">
   <h2>Эффект №4 Класс: iw-effect-4</h2>
    <nav class="he-nav iw-effect-4">
     <a href="#">Главная</a>
     <a href="#">Продукция</a>
     <a href="#">О нас</a>
     <a href="#">Новости</a>
     <a href="#">Контакты</a>
    </nav>
   </section>
   
   <section class="bg-color-5">
   <h2>Эффект №5 Класс: iw-effect-5</h2>
    <nav class="he-nav iw-effect-5">
     <a href="#">Главная</a>
     <a href="#">Продукция</a>
     <a href="#">О нас</a>
     <a href="#">Новости</a>
     <a href="#">Контакты</a>
    </nav>
   </section>
   
   <section class="bg-color-6">
   <h2>Эффект №6 Класс: iw-effect-6</h2>
    <nav class="he-nav iw-effect-6">
     <a href="#">Главная</a>
     <a href="#">Продукция</a>
     <a href="#">О нас</a>
     <a href="#">Новости</a>
     <a href="#">Контакты</a>
    </nav>
   </section>

   
   <section class="bg-color-7">
   <h2>Эффект №7 Класс: iw-effect-7</h2>
    <nav class="he-nav iw-effect-7">
     <a href="#">Главная</a>
     <a href="#">Продукция</a>
     <a href="#">О нас</a>
     <a href="#">Новости</a>
     <a href="#">Контакты</a>
    </nav>
   </section>
  
   <section class="bg-color-8">
   <h2>Эффект №8 Класс: iw-effect-8</h2>
    <nav class="he-nav iw-effect-8">
     <a href="#">Главная</a>
     <a href="#">Продукция</a>
     <a href="#">О нас</a>
     <a href="#">Новости</a>
     <a href="#">Контакты</a>
    </nav>
   </section>
   
   <section class="bg-color-9">
   <h2>Эффект №9 Класс: iw-effect-9</h2>
    <nav class="he-nav iw-effect-9">
     <a href="#"><span>Главная</span><span>Перейти</span></a>
     <a href="#"><span>Продукция</span><span>Перейти</span></a>
     <a href="#"><span>О нас</span><span>Перейти</span></a>
     <a href="#"><span>Новости</span><span>Перейти</span></a>
     <a href="#"><span>Контакты</span><span>Перейти</span></a>
    </nav>
   </section>
   
   <section class="bg-color-10">
   <h2>Эффект №10 Класс: iw-effect-10</h2>
    <nav class="he-nav iw-effect-10">
     <a href="#">Главная</a>
     <a href="#">Продукция</a>
     <a href="#">О нас</a>
     <a href="#">Новости</a>
     <a href="#">Контакты</a>
    </nav>
   </section>

CSS

Код
.codrops-icon-drop:before {
    content: "\e001";
}

.codrops-icon-prev:before {
    content: "\e004";
}

.container > section {
    margin: 0 auto;
    padding: 2em 3em;
    text-align: center;
}

.bg-color-1 {
    background: #1A237E;
}

.bg-color-2 {
    background: #283593;
}

.bg-color-3 {
    background: #1565C0;
}

.bg-color-4 {
    background: #0277BD;
}

.bg-color-5 {
    background: #00838F;
}

.bg-color-6 {
    background: #00695C;
}

.bg-color-7 {
    background: #2E7D32;
}

.bg-color-8 {
    background: #558B2F;
}

.bg-color-9 {
    background: #9E9D24;
}

.bg-color-10 {
    background: #F9A825;
}

section h2 {
    text-align:center;
    color:#fff;
    font-family:Verdana;
    padding-bottom:20px;
}

.my-link {
    background:#1565C0;
    padding: 20px 20px;
    color: #fff;
    text-decoration:none;
    display:block;
    width:90%;
    margin:40px auto;
    max-width:300px;
    text-align:center;
    -moz-box-shadow: 0 0 6px #555;
    -webkit-box-shadow: 0 0 6px #555;
    box-shadow:0 0 6px #555;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
    
}

.my-link:hover {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
    
}

@media screen and (max-width: 25em) {

    .codrops-icon span {
  display: none;
    }

}

.he-nav a {
    position: relative;
    display: inline-block;
    margin: 15px 25px;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}

.he-nav a:hover,
.he-nav a:focus {
    outline: none;
}

/* Effect 1: circle */
.iw-effect-1 a::before,
.iw-effect-1 a::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
    transform: translateX(-50%) translateY(-50%) scale(0.2);
}

.iw-effect-1 a::after {
    width: 90px;
    height: 90px;
    border-width: 6px;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
    transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.iw-effect-1 a:hover::before,
.iw-effect-1 a:hover::after,
.iw-effect-1 a:focus::before,
.iw-effect-1 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}

/* Effect 2: border switch */
.iw-effect-2 a {
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
}

.iw-effect-2 a::before,
.iw-effect-2 a::after {
    position: absolute;
    width: 45px;
    height: 2px;
    background: #fff;
    content: '';
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    pointer-events: none;
}

.iw-effect-2 a::before {
    top: 0;
    left: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}

.iw-effect-2 a::after {
    right: 0;
    bottom: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.iw-effect-2 a:hover::before,
.iw-effect-2 a:hover::after,
.iw-effect-2 a:focus::before,
.iw-effect-2 a:focus::after {
    opacity: 1;
}

.iw-effect-2 a:hover::before,
.iw-effect-2 a:focus::before {
    left: 50%;
    -webkit-transform: rotate(0deg) translateX(-50%);
    -moz-transform: rotate(0deg) translateX(-50%);
    transform: rotate(0deg) translateX(-50%);
}

.iw-effect-2 a:hover::after,
.iw-effect-2 a:focus::after {
    right: 50%;
    -webkit-transform: rotate(0deg) translateX(50%);
    -moz-transform: rotate(0deg) translateX(50%);
    transform: rotate(0deg) translateX(50%);
}

/* Effect 3: borders slight translate */
.iw-effect-3 a {
    padding: 10px;
    color: #1A237E;
    font-weight: 700;
    text-shadow: none;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

.iw-effect-3 a::before,
.iw-effect-3 a::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.iw-effect-3 a::before {
    top: 0;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.iw-effect-3 a::after {
    bottom: 0;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    transform: translateY(10px);
}

.iw-effect-3 a:hover,
.iw-effect-3 a:focus {
    color: #fff;
}

.iw-effect-3 a:hover::before,
.iw-effect-3 a:focus::before,
.iw-effect-3 a:hover::after,
.iw-effect-3 a:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

/* Effect 4: border slight translate */
.iw-effect-4 a {
    padding: 10px 20px;
}

.iw-effect-4 a::before,
.iw-effect-4 a::after  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #354856;
    content: '';
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}

.iw-effect-4 a::after  {
    border-color: #fff;
    opacity: 0;
    -webkit-transform: translateY(-7px) translateX(6px);
    -moz-transform: translateY(-7px) translateX(6px);
    transform: translateY(-7px) translateX(6px);
}

.iw-effect-4 a:hover::before,
.iw-effect-4 a:focus::before {
    opacity: 0;
    -webkit-transform: translateY(5px) translateX(-5px);
    -moz-transform: translateY(5px) translateX(-5px);
    transform: translateY(5px) translateX(-5px);
}

.iw-effect-4 a:hover::after,
.iw-effect-4 a:focus::after  {
    opacity: 1;
    -webkit-transform: translateY(0px) translateX(0px);
    -moz-transform: translateY(0px) translateX(0px);
    transform: translateY(0px) translateX(0px);
}

/* Effect 5: second border slides up */
.iw-effect-5 a {
    padding: 12px 10px 10px;
    color: #fff;
    text-shadow: none;
    font-weight: 700;
}

.iw-effect-5 a::before,
.iw-effect-5 a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    transform: scale(0.85);
}

.iw-effect-5 a::after {
    opacity: 0;
    -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: top 0.3s, opacity 0.3s, transform 0.3s;
}

.iw-effect-5 a:hover::before,
.iw-effect-5 a:hover::after,
.iw-effect-5 a:focus::before,
.iw-effect-5 a:focus::after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

.iw-effect-5 a:hover::after,
.iw-effect-5 a:focus::after {
    top: 0%;
    opacity: 1;
}

/* Effect 6: Brackets */
.iw-effect-6 a::before,
.iw-effect-6 a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.iw-effect-6 a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

.iw-effect-6 a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.iw-effect-6 a:hover::before,
.iw-effect-6 a:hover::after,
.iw-effect-6 a:focus::before,
.iw-effect-6 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

/* Effect 7: bottom border enlarge */
.iw-effect-7 a {
    padding: 0 0 10px;
}

.iw-effect-7 a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    content: '';
    opacity: 0;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.iw-effect-7 a:hover::after,
.iw-effect-7 a:focus::after {
    height: 5px;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

/* Effect 8: bottom line slides/fades in */
.iw-effect-8 a {
    padding: 8px 0;
}

.iw-effect-8 a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.1);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    transform: translateY(10px);
}

.iw-effect-8 a:hover::after,
.iw-effect-8 a:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

/* Effect 9: second text and borders */
.iw-effect-9 a {
    margin: 0 20px;
    padding: 18px 20px;
}

.iw-effect-9 a::before,
.iw-effect-9 a::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    content: '';
    opacity: 0.2;
    -webkit-transition: opacity 0.3s, height 0.3s;
    -moz-transition: opacity 0.3s, height 0.3s;
    transition: opacity 0.3s, height 0.3s;
}

.iw-effect-9 a::after {
    top: 100%;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.iw-effect-9 a span:first-child {
    z-index: 2;
    display: block;
    font-weight: 300;
}

.iw-effect-9 a span:last-child {
    z-index: 1;
    display: block;
    padding: 8px 0 0 0;
    color: rgba(255,255,255,0.8);
    text-shadow: none;
    text-transform: none;
    font-style: italic;
    font-size: 0.75em;
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}

.iw-effect-9 a:hover::before,
.iw-effect-9 a:focus::before {
    height: 6px;
}

.iw-effect-9 a:hover::before,
.iw-effect-9 a:hover::after,
.iw-effect-9 a:focus::before,
.iw-effect-9 a:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.iw-effect-9 a:hover span:last-child,
.iw-effect-9 a:focus span:last-child {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%);
}

/* Effect 10: three circles */
.iw-effect-10 a {
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

.iw-effect-10 a::before {
    position: absolute;
    top: 100%;
    left: 50%;
    color: transparent;
    content: '•';
    text-shadow: 0 0 transparent;
    font-size: 1.2em;
    -webkit-transition: text-shadow 0.3s, color 0.3s;
    -moz-transition: text-shadow 0.3s, color 0.3s;
    transition: text-shadow 0.3s, color 0.3s;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
}

.iw-effect-10 a:hover::before,
.iw-effect-10 a:focus::before {
    color: #fff;
    text-shadow: 10px 0 #fff, -10px 0 #fff;
}

.iw-effect-10 a:hover,
.iw-effect-10 a:focus {
    color: #ba7700;
}

На этом установка завершена!

Демонстрация
Прикрепления: 5198970.png (22.1 Kb)
Страна: (RU)
Kosten
Среда, 06 Ноября 2019 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Если ранее можно было эффект подключить под изображением, чтоб был оригинальный эффект, то сейчас эффекты CSS при наведении на ссылку создаются на чистом стиле.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Красивый эффект при наведении на ссылку (Здесь самые интересные ховер эффекты для ссылок на сайт)
  • Страница 1 из 1
  • 1
Поиск: