logo

Ссылки, события при наведении и клике

› › Ссылки, события при наведении и клике

Стандартный вид ссылки это текст темно-фиолетового цвета, подчеркнутый снизу. При клике цвет изменяется на красный и подчеркивание остается. Первоначально верстальщики обходились малым: меняли цвет первоначального текста, убирали подчеркивание при наведении и клике, изменяя при этом и цвет ссылки.

С появлением CSS3 возможностей видоизменить поведение ссылки при наведении или клике стало намного больше. Несколько вариантов предложено ниже.

HTML- код самый обыкновенный.


<nav class="link__eff">
    <a href="#" class="link__effect">HTML & CSS</a>
    <a href="#" class="link__effect">Bootstrap</a>
    <a href="#" class="link__effect">Javascript</a>
    <a href="#" class="link__effect">Wordpress</a>
    <a href="#" class="link__effect">php </a>
 </nav>

Стилевое оформление также без «наворотов»


.link__eff {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: center;
    background: #16A085;
    padding: 15px 0;
    margin-bottom: 15px;
}

.link__eff a {
    position: relative;
    display: inline-block;
    margin: 15px 15px;
    padding: 5px 0;
    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: 1em;
}

.link__eff a:hover,
.link__eff a:focus {
    outline: none;
}

Подчеркивание слева направо

HTML & CSS Bootstrap Javascript WordPress php 

.link__effect_1 {
    line-height: 1;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

.link__effect_1:hover {
    color: #fff;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.link__effect_1:after {
    display: block;
    content: "";
    height: 1px;
    width: 0;
    background-color: #fff;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.link__effect_1:hover:after,
.link__effect_1:focus:after {
    width: 100%
}

Подчеркивание от центра

HTML & CSS Bootstrap Javascript WordPress php 

.link__effect_2 {
    position: relative;
    cursor: pointer;
    color: #fff;
    outline: 0;
    text-decoration: none
}

.link__effect_2:hover {
    color: #fff;
    text-decoration: none !important
}

.link__effect_2:hover:after {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1)
}

.link__effect_2:after {
    content: '\2588';
    line-height: 0;
    font-size: 999em;
    color: inherit;
    overflow: hidden;
    font-style: normal;
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0)
}

Боковые скобки

HTML & CSS Bootstrap Javascript WordPress php 

.link__effect_3::before,
.link__effect_3::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
    transition: opacity 0.2s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s;
}

.link__effect_3::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}

.link__effect_3::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}

.link__effect_3:hover {
    color: rgba(0, 0, 0, 0.8)
}

.link__effect_3:hover::before,
.link__effect_3:hover::after,
.link__effect_3:focus::before,
.link__effect_3:focus::after {
    opacity: 1;
    color: rgba(0, 0, 0, 0.8);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

Трансформация сверху вниз

HTML & CSS Bootstrap Javascript WordPress php 

.link__effect_4::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    content: '';
    opacity: 0;-webkit-transition: opacity 0.1s, -webkit-transform 0.5s;
    transition: opacity 0.1s, -webkit-transform 0.5s;
    transition: opacity 0.1s, transform 0.5s;
    transition: opacity 0.1s, transform 0.5s, -webkit-transform 0.5s;

}

.link__effect_4:hover {
    color: rgba(0, 0, 0, 0.8)
}

.link__effect_4:hover::after,
.link__effect_4:focus::after {
    opacity: 1;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

Верхнее подчеркивание в уголок

HTML & CSS Bootstrap Javascript WordPress php 

.link__eff a.link__effect_5 {
    margin: 0 10px;
    padding: 10px;
}

.link__effect_5::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    -webkit-transition: top 0.3s;
    transition: top 0.3s;
}

.link__effect_5::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: #fff;
    content: '';
    -webkit-transition: height 0.3s;
    transition: height 0.3s;
}

.link__effect_5:hover {
    color: #fff;
    text-shadow: 1px 1px 1px #111;
}

.link__effect_5:hover::before {
    top: 100%;
    opacity: 1;
}

.link__effect_5:hover::after {
    height: 100%;
}

Вторая граница скользит вверх

HTML & CSS Bootstrap Javascript WordPress php 

.link__eff a.link__effect_6 {
    padding: 12px 10px 10px;
    color: #594a96;
    text-shadow: none;
    font-weight: 700;
}

.link__effect_6::before,
.link__effect_6::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #594a96;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
}

.link__effect_6::after {
    opacity: 0;
    -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    transition: top 0.3s, opacity 0.3s, transform 0.3s;
    transition: top 0.3s, opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.link__effect_6:hover::before,
.link__effect_6:hover::after,
.link__effect_6:focus::before,
.link__effect_6:focus::after {

    -webkit-transform: scale(1);
    transform: scale(1);
}

.link__effect_6:hover::after,
.link__effect_6:focus::after {
    top: 0%;
    opacity: 1;
}

Вертикальные границы в горизонтальные

HTML & CSS Bootstrap Javascript WordPress php 

.link__eff a.link__effect_7 {
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
}

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

.link__effect_7::before {
    top: 0;
    left: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.link__effect_7::after {
    right: 0;
    bottom: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.link__effect_7:hover {
    color: #fff;
    text-shadow: 1px 1px 1px #111;
}

.link__effect_7:hover::before,
.link__effect_7:hover::after,
.link__effect_7:focus::before,
.link__effect_7:focus::after {
    opacity: 1;
}

.link__effect_7:hover::before,
.link__effect_7:focus::before {
    left: 50%;
    -webkit-transform: rotate(0deg) translateX(-50%);
    transform: rotate(0deg) translateX(-50%);
}

.link__effect_7:hover::after,
.link__effect_7:focus::after {
    right: 50%;
    -webkit-transform: rotate(0deg) translateX(50%);
    transform: rotate(0deg) translateX(50%);
}

Горизонтальные границы в крест

HTML & CSS Bootstrap Javascript WordPress php 

.link__eff a.link__effect_8 {
    position: relative;
    z-index: 1;
    padding: 30px 0;
}

.link__effect_8 {
    padding: 0 5px;
    color: #594a96;
    font-weight: 700;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.link__effect_8::before,
.link__effect_8::after {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: #594a96;
    content: '';
    z-index: -1;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    pointer-events: none;
}

.link__effect_8::before {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

.link__effect_8::after {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}

.link__effect_8:hover,
.link__effect_8:focus {
    color: #fff;
    text-shadow: 1px 1px 1px #111;
}

.link__effect_8:hover::before,
.link__effect_8:hover::after,
.link__effect_8:focus::before,
.link__effect_8:focus::after {
    opacity: 0.7;
}

.link__effect_8:hover::before,
.link__effect_8:focus::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.link__effect_8:hover::after,
.link__effect_8:focus::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Появление горизонтальных границ

HTML & CSS Bootstrap Javascript WordPress php 

.link__eff a.link__effect_9 {
    padding: 10px;
    color: #fff;
    font-weight: 700;
}

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

.link__effect_9::before {
    top: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.link__effect_9::after {
    bottom: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.link__effect_9:hover,
.link__effect_9:focus {
    text-shadow: 1px 1px 1px #111;
}

.link__effect_9:hover::before,
.link__effect_9:focus::before,
.link__effect_9:hover::after,
.link__effect_9:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

Границы и дополнительный текст

Для этого варианта немного изменим HTML-код.


<nav class="link__eff">
    <a href="#" class="link__effect_10"><span>HTML & CSS</span><span>Верстка сайта</span></a>
    <a href="#" class="link__effect_10"><span>Bootstrap</span><span>Фреймворк</span></a>
    <a href="#" class="link__effect_10"><span>Javascript</span><span>Библиотека</span></a>
    <a href="#" class="link__effect_10"><span>Wordpress</span><span>Управление сайта</span></a>
    <a href="#" class="link__effect_10"><span>php</span><span>Основы    </span> </a>
</nav>
HTML & CSSВерстка сайта BootstrapФреймворк JavascriptБиблиотека WordPressУправление сайта phpОсновы 

.link_eff a.link__effect_10 {
    margin: 0 20px;
    padding: 18px 20px;
}

.link__effect_10::before,
.link__effect_10::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    opacity: 0.2;
    -webkit-transition: opacity 0.3s, height 0.3s;
    transition: opacity 0.3s, height 0.3s;
}

.link__effect_10::after {
    top: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    ;
    -webkit-transform: translateY(-10px);
    ;
    transform: translateY(-10px);
}

.link__effect_10 span:first-child {
    z-index: 2;
    display: block;
    font-weight: 300;
}

.link__effect_10 span:last-child {
    z-index: 1;
    display: block;
    padding: 8px 0 0 0;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
    text-shadow: none;
    text-transform: none;
    font-style: italic;
    font-size: 0.7em;
    font-family: Palatino, Georgia, serif;
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.link__effect_10:hover,
.link__effect_10:focus {
    color: #fff;
    text-shadow: 1px 1px 1px #111;
}

.link__effect_10:hover::before,
.link__effect_10:focus::before {
    height: 6px;
}

.link__effect_10:hover::before,
.link__effect_10:hover::after,
.link__effect_10:focus::before,
.link__effect_10:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.link__effect_10:hover span:last-child,
.link__effect_10:focus span:last-child {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}
Практические примеры, Элементы CSS, Эффекты для текста 0

Метки: , ,

Рекомендую прочитать...

Lightbox на чистом CSS3 без JavaScript
Lightbox на чистом CSS3 без использования JavaScript

Распространение разметки CSS3 и поддержка ее современными браузерами, позволило создавать эффект всплывающего поверх контента изображения на чистом CSS3.

Читать полностью
Коллекция Hover.css
Коллекция Hover.css

Hover.css это коллекция CSS3 эффектов, которые можно использовать для анимации при наведении на них курсора. Содержит более 100 эффектов: 2D-трансформации, тени, границы, использование библиотеки иконок.
Пользоваться данной коллекцией очень просто: скачиваем архив ZIP, в папке css находим файл hover.css и загружаем его на сайт. Лучше конечно воспользоваться его минимизированной копией hover-min.css

Читать полностью
Фильтры CSS3
Фильтры CSS

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

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.