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;
} 

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


.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%
}

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


.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)
}

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


.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);
}

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


.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);
}

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


.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%;
}

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


.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;
}

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


.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%);
}

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


.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);
}

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


.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>

.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

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

Оформление кнопок на сайте
Кнопки для сайта

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

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

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

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

Читать полностью
Необычное превью для «Главной»
необычное превью для главной

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

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

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

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

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