Скачать для фотошопа и для создания сайта Понедельник, 22.07.2024, 04:11
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Шаблоны для Ucoz
Шапки для Ucoz
Скрипты для Ucoz
Иконки для Ucoz
Кнопки для Ucoz
Уроки для Ucoz
Статьи для Ucoz
Прочее для Ucoz

Популярное

Мини-чат

Наш опрос
Оцените мой сайт
1. Отлично
2. Хорошо
3. Неплохо
4. Плохо
5. Ужасно
Всего ответов: 7

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Оригинальные hover-эффекты для иконок
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
23.12.2023, 17:12
Оригинальные hover-эффекты для иконок




Здесь представлена подборка на красивые эффекты, которые предназначены для иконок, где появляется изменение при наведении с помощью стиля CSS3. А точнее в этом материале хочется поделиться с красивым оформлением кнопок по своему изменению с наведением курсора. Где задействовано несколько простых эффектов, которые предназначены для кнопок. Как поняли, что сама идея будет состоять в том, чтобы создать стильный эффект на элементы.

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

И так начнем:

Нужно подключить шрифтовые знаки в css сайта.

Код

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);


После выбираем нужную иконку и устанавливаем по месту.

Значок с плавным изменение цвета при наведении



HTML

Код

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


CSS

Код

.krasnaya_animatsiya {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-perspective: 50em;
  perspective: 50em;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  background-color: #7e1946;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: 0 0 5px rgba(0, 0, 0, 0.5);
  color: #e6e6e6;
  display: inline-block;
  font-size: 40px;
  height: 75px;
  line-height: 75px;
  margin: 40px;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 75px;
}

.krasnaya_animatsiya:before {
  color: #fff;
  text-shadow: 1px 1px 5px #000000;
  opacity: 0.75;
}

.krasnaya_animatsiya:after {
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  content: '';
  background-color: #69153a;
  border-radius: 5px 0 0 5px;
  z-index: -1;
}

.krasnaya_animatsiya:hover,
.krasnaya_animatsiya:active,
.krasnaya_animatsiya.hover {
  color: #7e1946;
  background-color: #1d5599;
}

.krasnaya_animatsiya:hover:after,
.krasnaya_animatsiya:active:after,
.krasnaya_animatsiya.hover:after {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background-color: #2468bb;
}


Здесь идет плавное изменение оттенка, которое начинается с левого края.

Демонстрация

Значок с вращающейся границей при наведении



HTML

Код

<a href="#" class="knopka_povorota ion-ios-star-outline"></a>
<a href="#" class="knopka_povorota ion-ios-list-outline"></a>
<a href="#" class="knopka_povorota ion-ios-chatboxes-outline"></a>
<a href="#" class="knopka_povorota ion-ios-home-outline"></a>
<a href="#" class="knopka_povorota ion-ios-pie-outline"></a>
<a href="#" class="knopka_povorota ion-ios-gear-outline"></a>


CSS

Код

.knopka_povorota {
  position: relative;
  font-size: 40px;
  color: #e6e6e6;
  width: 75px;
  margin: 40px;
  height: 75px;
  line-height: 75px;
  display: inline-block;
  text-align: center;
  -webkit-perspective: 50em;
  perspective: 50em;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.knopka_povorota:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 2px solid #e6e6e6;
  content: '';
  z-index: -1;
  border-radius: 50%;
}
.knopka_povorota:before {
  color: #fff;
}
.knopka_povorota:before,
.knopka_povorota:after {
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
}
.knopka_povorota:hover,
.knopka_povorota:active,
.knopka_povorota.hover {
  color: #c0392b;
}
.knopka_povorota:hover:after,
.knopka_povorota:active:after,
.knopka_povorota.hover:after {
  border-color: transparent #c0392b;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}


Сам трюк заключается в том, что при наведении производится не полный поворот.

Демонстрация

Значок с вращающейся границей при наведении



HTML

[/code]
<a href="#" class="element_razvorota ion-ios-star-outline"></a>
<a href="#" class="element_razvorota ion-ios-list-outline"></a>
<a href="#" class="element_razvorota ion-ios-chatboxes-outline"></a>
<a href="#" class="element_razvorota ion-ios-home-outline"></a>
<a href="#" class="element_razvorota ion-ios-pie-outline"></a>
<a href="#" class="element_razvorota ion-ios-gear-outline"></a>[/code]

CSS

Код

.element_razvorota {
  position: relative;
  font-size: 40px;
  color: #e6e6e6;
  width: 75px;
  margin: 40px;
  height: 75px;
  line-height: 75px;
  display: inline-block;
  text-align: center;
  -webkit-perspective: 50em;
  perspective: 50em;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.element_razvorota:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 2px solid #e6e6e6;
  content: '';
  z-index: -1;
  border-radius: 50%;
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
.element_razvorota:before,
.element_razvorota:after {
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.element_razvorota:hover,
.element_razvorota:active,
.element_razvorota.hover {
  color: #c0392b;
}
.element_razvorota:hover:after,
.element_razvorota:active:after,
.element_razvorota.hover:after {
  border-color: #c0392b;
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}


Здесь будет производится полный разворот по горизонтали.

Демонстрация

Значок с появлением рамки при наведении



HTML

Код

<a href="#" class="poyavleniya_ramokov ion-ios-star-outline"></a>
<a href="#" class="poyavleniya_ramokov ion-ios-list-outline"></a>
<a href="#" class="poyavleniya_ramokov ion-ios-chatboxes-outline"></a>
<a href="#" class="poyavleniya_ramokov ion-ios-home-outline"></a>
<a href="#" class="poyavleniya_ramokov ion-ios-pie-outline"></a>
<a href="#" class="poyavleniya_ramokov ion-ios-gear-outline"></a>


CSS

Код

.poyavleniya_ramokov {
  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;
}

.poyavleniya_ramokov:after {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  background-color: #f39c12;
  content: '';
  z-index: -1;
  -webkit-transform: rotate3d(40, 40, 0, 40deg);
  transform: rotate3d(40, 40, 0, 40deg);
  opacity: 0;
}

.poyavleniya_ramokov:before,
.poyavleniya_ramokov:after {
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.poyavleniya_ramokov:hover,
.poyavleniya_ramokov:active,
.poyavleniya_ramokov.hover {
  color: #ffffff;
}

.poyavleniya_ramokov:hover:after,
.poyavleniya_ramokov:active:after,
.poyavleniya_ramokov.hover:after {
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
  transform: rotate3d(0, 0, 0, 0deg);
  opacity: 1;
}


Темные значки, где присутствует эффект светло желтой рамки.

Демонстрация

Скошенные темно синее тематические иконки



HTML

Код

<a href="#" class="svetlonag_sinyayapa ion-ios-star-outline"></a>
<a href="#" class="svetlonag_sinyayapa ion-ios-list-outline"></a>
<a href="#" class="svetlonag_sinyayapa ion-ios-chatboxes-outline"></a>
<a href="#" class="svetlonag_sinyayapa ion-ios-home-outline"></a>
<a href="#" class="svetlonag_sinyayapa ion-ios-pie-outline"></a>
<a href="#" class="svetlonag_sinyayapa ion-ios-gear-outline"></a>


CSS

Код

.svetlonag_sinyayapa {
  font-family: 'Raleway', Arial, sans-serif;
  border: none;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  width: 70px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  margin: 12px 25px;
  font-weight: 300;
  outline: none;
  position: relative;
  font-size: 38px;
  background-image: -webkit-linear-gradient(bottom, #262626 0, #333333 100%);
  background-image: linear-gradient(to top, #262626 0, #333333 100%);
  box-shadow: 1px 1px 2px -2px rgba(255, 255, 255, 0.8) inset, -1px -1px 2px -2px rgba(255, 255, 255, 0.3) inset, 1px 1px 4px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.svetlonag_sinyayapa:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 5px 5px;
  opacity: 0;
  background-color: #94c6e7;
  mix-blend-mode: color;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.svetlonag_sinyayapa:hover,
.svetlonag_sinyayapa.hover {
  color: #ffffff;
}
.svetlonag_sinyayapa:hover:after,
.svetlonag_sinyayapa.hover:after {
  opacity: 1;
}
.svetlonag_sinyayapa:active {
  color: #ffffff;
}
.svetlonag_sinyayapa:active:after {
  height: 100%;
  -webkit-transition: 0.05s;
  transition: 0.05s;
}


Этот стиль дизайна больше похоже на стандартную кнопку с оригинальным трюк по центру.

Демонстрация

Квадратные значки с нижней границей при наведении



HTML

Код

<a href="#" class="granitsey_naveden green ion-ios-star-outline"></a>
<a href="#" class="granitsey_naveden blue ion-ios-list-outline"></a>
<a href="#" class="granitsey_naveden navy ion-ios-chatboxes-outline"></a>
<a href="#" class="granitsey_naveden yellow ion-ios-home-outline"></a>
<a href="#" class="granitsey_naveden red ion-ios-pie-outline"></a>
<a href="#" class="granitsey_naveden silver ion-ios-gear-outline"></a>


CSS

Код

.granitsey_naveden {
  position: relative;
  font-size: 40px;
  background-color: #2b2b2b;
  color: #ffffff;
  width: 75px;
  margin: 30px;
  height: 75px;
  line-height: 75px;
  display: inline-block;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  -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;
}
.granitsey_naveden:after {
  position: absolute;
  bottom: 0;
  height: 4px;
  left: 50%;
  right: 50%;
  background: #c0392b;
  content: '';
}
.granitsey_naveden:before,
.granitsey_naveden:after {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.granitsey_naveden:hover,
.granitsey_naveden:active,
.granitsey_naveden.hover {
  color: #ffffff;
  text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.8);
}
.granitsey_naveden:hover:after,
.granitsey_naveden:active:after,
.granitsey_naveden.hover:after {
  left: 0;
  right: 0;
}


Многим знакомое подчеркивание, только производится в самой кнопки, что смотрится оригинально.

Демонстрация

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

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

Скачать Оригинальные hover-эффекты для иконок
Категория: Скачать Скрипты для Ucoz | Добавил: Marco
Просмотров: 34 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт

Поиск

Популярное
SLS-Склад Лайт 
Feedmaster 1.7.4.2 бесплатно. 
Atlantis Word Processor 1.6.2 Beta 
Mozilla Sunbird 0.9 RU 
Фото на документы Экспресс 1.51 Rus 

На форуме
Файлообменник. З...
Автор: roterb
Форум: Куплю/Продам
Дата: 19.07.2024
Ответов: 0
Куплю, обмен шве...
Автор: roterb
Форум: Куплю/Продам
Дата: 27.06.2024
Ответов: 0
Файлообменник Sh...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Заработок на фай...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Файлообменник Le...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1

Популярное

Партнеры сайта
Стать партнером Стать партнером Стать партнером Стать партнером

Copyright MyCorp © 2024