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

Метки: , ,

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

Тег  <hr>  или просто линия
Или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег hr .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина)

Читать полностью
Псевдоэлементы ::before и ::after
Псевдоэлементы

Из самого наименования предполагаем, что это вроде не настоящий элемент для верстки, а как бы подделка. Но эта «подделка» дорогого стоит.

Псевдоэлементы ::before и ::after ничего не изменяют в HTML-документе, их не существует и в дереве элементов документа.

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

Читать полностью
Трансформация «Дверной глазок»
трансформация Дверной глазок

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

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

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

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

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