• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура HTML элемента » Кнопки для сайта с подчеркиванием на CSS (Квадратные значки с нижней границей при наведении курсора)
Кнопки для сайта с подчеркиванием на CSS
Kosten
Дата: Понедельник, 2020-07-27, 22:30 | Сообщение 1
Оффлайн
Администраторы
Сообщений:27204
Награды: 61


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

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

При проверке по работе эффекта:



Установка:

HTML

Код
<a href="#" class="guranisea_naveden green ion-lock-combination"></a>
<a href="#" class="guranisea_naveden blue ion-locked"></a>
<a href="#" class="guranisea_naveden navy ion-unlocked"></a>
<a href="#" class="guranisea_naveden yellow ion-key"></a>
<a href="#" class="guranisea_naveden red ion-arrow-graph-up-right"></a>
<a href="#" class="guranisea_naveden silver ion-arrow-graph-down-right"></a>

CSS

Код
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.guranisea_naveden {
    position: relative;
    font-size: 40px;
    background-color: #444141;
    color: #f3eeee;
    width: 75px;
    margin: 30px;
    height: 75px;
    line-height: 75px;
    display: inline-block;
    text-align: center;
    text-shadow: 1px 1px 1px rgb(31 31 31 / 60%);
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.guranisea_naveden:after {
  position: absolute;
  bottom: 0;
  height: 4px;
  left: 50%;
  right: 50%;
  background: #c0392b;
  content: '';
}
.guranisea_naveden:before,
.guranisea_naveden:after {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.guranisea_naveden:hover,
.guranisea_naveden:active,
.guranisea_naveden.hover {
  color: #ffffff;
  text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.8);
}
.guranisea_naveden:hover:after,
.guranisea_naveden:active:after,
.guranisea_naveden.hover:after {
  left: 0;
  right: 0;
}

Выбираем тот стиль кнопки по своему оттенку, что больше подойдет под основной стиль дизайна.

Демонстрация
Прикрепления: 0822726.png(16.9 Kb) · zornet-square-i.zip(3.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура HTML элемента » Кнопки для сайта с подчеркиванием на CSS (Квадратные значки с нижней границей при наведении курсора)
  • Страница 1 из 1
  • 1
Поиск: