ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой эффект наведения кнопок на CSS

Простой эффект наведения кнопок на CSS

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

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

По умолчанию:

При наведении:

Эффект наведения на иконки социальных сетей

Создание кнопок социальных сетей с помощью CSS

Установка:

HEAD

Код

HTML

Код

CSS

Код

.knipoqki {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lodetunda {
  display: flex;
  position: relative;
  overflow: hidden;
  width: var(--link-size);
  height: var(--link-size);
  margin: 8px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0px 1px 3px rgba(0,0,0,0.12);
  text-decoration: none;
  transition: var(--trans-property);
}
.lodetunda i {
  margin: auto;
  font-size: 24px;
  color: #67798e;
  z-index: 1;
  transition: var(--trans-property);
}
.lodetunda:after {
  content: "";
  width: var(--link-size);
  height: var(--link-size);
  position: absolute;
  transform: translate(0, var(--link-size));
  border-radius: 50%;
  transition: var(--trans-property);
}
.lodetunda.twitter:after {
  background-color: #1da1f2;
}
.lodetunda.github:after {
  background-color: #24292e;
}
.lodetunda.dribbble:after {
  background-color: #ea4c89;
}
.lodetunda.instagram:after {
  background-color: #5851db;
}
.lodetunda.facebook:after {
  background-color: #1769ff;
}
/*** Animations ***/
.lodetunda:hover {
  transform: translateY(-4px);
  box-shadow: 0px 4px 12px rgba(0,0,0,0.16);
}
.lodetunda:hover i {
  color: #fff;
}
.lodetunda:hover:after {
  transform: translate(0) scale(1.2);
}

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

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

18 Сентября 2022 Загрузок: 1 Просмотров: 842 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0