Шаблоны CSS3

Готовые решения для оформления сайта

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

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

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

С появлением 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%);
}

12.07.2021 Денисюк Олег Практические примеры, Элементы CSS, Эффекты для текста 0

Метки: Ссылки, Эффекты для текста, Эффекты при наведении и клике

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

31.10.2017 Оформление кнопок на сайте

Кнопки для сайта

Продолжаем публикацию оформления кнопок для сайта. Сегодня рассмотрим кнопки с изменением внешнего вида при наведении в виде шторок и анимации текстового содержимого.

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

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

31.10.2017 Коллекция Hover.css

Коллекция Hover.css

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

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

17.12.2017 Необычное превью для «Главной»

необычное превью для главной

Страница на которой выводятся превью статей, размещенных на сайте, обычно именуется «Главной». Чаще всего превью статьи выглядит так: заголовок статьи, небольшая картинка — миниатюра, и небольшой текст в котором, либо начало статьи, либо краткое содержание статьи и кнопочка — ссылка типа «Читать далее», ведущая на страницу со статьей. Ниже представлена несколько иная «подача» превью статьи. Здесь миниатюра совмещена с кратким анонсом статьи

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

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

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