• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты HTML для сайта » Кнопки с вращающейся рамкой на HTML + CSS (Темная иконка с вращающейся рамкой при наведении HTML и CSS3)
Кнопки с вращающейся рамкой на HTML + CSS
Kosten
Дата: Понедельник, 2020-07-27, 23:15 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29297
Награды: 62


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

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



Установка:

HTML

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

CSS

Код
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.kvadegam-uaivaivales {
    position: relative;
    font-size: 40px;
    background-color: #3c3838;
    color: #f5efef;
    width: 75px;
    margin: 40px;
    height: 75px;
    line-height: 75px;
    display: inline-block;
    text-align: center;
    text-shadow: 1px 1px 1px rgb(37 37 37 / 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;
}
.kvadegam-uaivaivales:after {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  background: #f39c12;
  content: '';
  z-index: -1;
  -webkit-transform: rotate(7deg) scale(0.8);
  transform: rotate(7deg) scale(0.8);
}
.kvadegam-uaivaivales:before,
.kvadegam-uaivaivales:after {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.kvadegam-uaivaivales:hover,
.kvadegam-uaivaivales:active,
.kvadegam-uaivaivales.hover {
  color: #ffffff;
  text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.8);
}
.kvadegam-uaivaivales:hover:after,
.kvadegam-uaivaivales:active:after,
.kvadegam-uaivaivales.hover:after {
  -webkit-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
}

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

Демонстрация
Прикрепления: 2147033.png(18.0 Kb) · css-icons.zip(3.5 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты HTML для сайта » Кнопки с вращающейся рамкой на HTML + CSS (Темная иконка с вращающейся рамкой при наведении HTML и CSS3)
  • Страница 1 из 1
  • 1
Поиск: