• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Подчеркивание текста виде кнопки на CSS (Стильный CSS эффект подчёркивания текста под ссылкой)
Подчеркивание текста виде кнопки на CSS
Kosten
Дата: Четверг, 2018-12-06, 20:42 | Сообщение 1
Администраторы
Сообщений:18866
Награды: 55


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

Где безусловно можно поставить под эффект кнопки, что аналогично можно применять по дизайну. По цветовой гамме все ставится в стилистике CSS, что по умолчанию идет в синем оттенке. Так, что можно оформить под любой стиль интернет сайта.

Так выглядит в рабочем состояние, где ниже будет ссылка на demo страницу, что можно в реале посмотреть.



Приступаем к установке:

HTML

Код
<div class="setukolas">
  <div class="katemun"></div>
  <div class="kidemakov"></div>
  Записки веб-разработчика
</div>


CSS

Код
div.setukolas {
    display: inline-block;
    padding: 17px 20px;
    color: #52b1e2;
    font-weight: bold;
    cursor: pointer;
    position: relative;
}

    div.katemun,
    div.kidemakov {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;  
    }

    div.katemun::after,
    div.katemun::before,
    div.kidemakov::after,
    div.kidemakov::before {
  content: "";
  display: block;
  transition: all 0.3s;
  background: #288EC3;
  position: absolute;
    }

    div.katemun::after,
    div.katemun::before {  
  width: 0;
  height: 1px;  
  transition-delay: 0.3s;
    }

    div.katemun::after,
    div.kidemakov::after {
  top: 0;
  left: 0;
    }

    div.katemun::before,
    div.kidemakov::before {
  bottom: 0;
  right: 0;
    }

    div.setukolas:hover div.katemun::after,
    div.setukolas:hover div.katemun::before {
  width: 100%;
  transition-delay: 0s;
    }

    div.kidemakov::after,
    div.kidemakov::before {  
  width: 1px;
  height: 0;  
  transition-delay: 0s;
    }

    div.setukolas:hover div.kidemakov::after,
    div.setukolas:hover div.kidemakov::before {
  height: 100%;
  transition-delay: 0.3s;
    }

Демонстрация
Прикрепления: 1257838.jpg(10.8 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Подчеркивание текста виде кнопки на CSS (Стильный CSS эффект подчёркивания текста под ссылкой)
  • Страница 1 из 1
  • 1
Поиск: