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


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

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



Установка:

HTML

Код
<a href="#" class="anachok_suvedvino green ion-ios-analytics-outline"></a>
<a href="#" class="anachok_suvedvino blue ion-ios-analytics"></a>
<a href="#" class="anachok_suvedvino navy ion-navigate"></a>
<a href="#" class="anachok_suvedvino yellow ion-pinpoint"></a>
<a href="#" class="anachok_suvedvino red ion-ios-paw"></a>
<a href="#" class="anachok_suvedvino silver ion-ios-keypad"></a>

CSS

Код
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.anachok_suvedvino {
  position: relative;
  font-size: 40px;
  background-color: #2b2b2b;
  color: rgba(255, 255, 255, 0.8);
  width: 75px;
  margin: 40px;
  height: 75px;
  line-height: 75px;
  display: inline-block;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.anachok_suvedvino:after {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  background-color: #f39c12;
  content: '';
  z-index: -1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.anachok_suvedvino:before,
.anachok_suvedvino:after {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.anachok_suvedvino:hover,
.anachok_suvedvino:active,
.anachok_suvedvino.hover {
  color: #ffffff;
}
.anachok_suvedvino:hover:after,
.anachok_suvedvino:active:after,
.anachok_suvedvino.hover:after {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

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

Демонстрация
Прикрепления: 5274211.png(15.4 Kb) · 1-image-hover.zip(3.5 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2020-07-27, 22:57 | Сообщение 2
Оффлайн
Администраторы
Сообщений:29728
Награды: 62


Это идет как дополнение к первой кнопки, так как по дизайну они аналогичны, только раска при навидение появляется по другую сторону.

Значок с выдвижной рамкой при наведении с помощью чистого CSS



Установка:

HTML

Код
<a href="#" class="amkopas_anaveden ion-ios-star-outline"></a>
<a href="#" class="amkopas_anaveden blue ion-ios-list-outline"></a>
<a href="#" class="amkopas_anaveden ion-ios-chatboxes-outline"></a>
<a href="#" class="amkopas_anaveden ion-ios-home-outline"></a>
<a href="#" class="amkopas_anaveden ion-ios-pie-outline"></a>
<a href="#" class="amkopas_anaveden ion-ios-gear-outline"></a>

CSS

Код
.amkopas_anaveden {
  position: relative;
  font-size: 40px;
  background-color: #2b2b2b;
  color: rgba(255, 255, 255, 0.8);
  width: 75px;
  margin: 40px;
  height: 75px;
  line-height: 75px;
  display: inline-block;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.amkopas_anaveden:after {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  background-color: #f39c12;
  content: '';
  z-index: -1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.amkopas_anaveden:before,
.amkopas_anaveden:after {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.amkopas_anaveden:hover,
.amkopas_anaveden:active,
.amkopas_anaveden.hover {
  color: #ffffff;
}
.amkopas_anaveden:hover:after,
.amkopas_anaveden:active:after,
.amkopas_anaveden.hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Здесь также нужно подключить шрифтовые кнопки, что можете стиль взять в первом материале.

Демонстрация
Прикрепления: 8845404.png(17.5 Kb) · icons.zip(3.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды HTML для сайта » Эффект CSS для кнопок с выдвижной рамкой (Значок с выдвижной рамкой при наведении с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: