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

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

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

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

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

Красивые кнопки на чистом CSS

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

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

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



Установка:

HEAD

Код
<script src="https://kit.fontawesome.com/1c2c2462bf.js" crossorigin="anonymous"></script>

HTML

Код
<div class="knipoqki">
  <a class="lodetunda twitter" href="#">
  <i class="fab fa-twitter"></i>
  </a>
  <a class="lodetunda dribbble" href="#">
  <i class="fab fa-dribbble"></i>
  </a>
  <a class="lodetunda facebook" href="#">
  <i class="fab fa-facebook-f"></i>
  </a>
  <a class="lodetunda instagram" href="#">
  <i class="fab fa-instagram"></i>
  </a>
  <a class="lodetunda github" href="#">
  <i class="fab fa-github"></i>
  </a>
  </div>

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);
}

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

Демонстрация
2022-09-18 Загрузок: 1 Просмотров: 188 Комментарий: (0)

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

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

Оставь свой отзыв

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