• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффект кнопки при наведении в CSS (Применение hover эффектов CSS при наведении курсора)
Создать эффект кнопки при наведении в CSS
Kosten
Дата: Среда, 2019-03-20, 14:57 | Сообщение 1
Администраторы
Сообщений:20711
Награды: 56


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

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

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



Здесь немного переделано, а добавлен обвод и сменена палитра цвета на темный фон.



Приступаем к установке:

HTML

Код
<button class="kavepug-mikalen" data-text="Кнопка для сайта Zornet.Ru">
  <span>Кнопка для сайта Zornet.Ru</span>
</button>


CSS

Код
.kavepug-mikalen {
    position: relative;
    height: 48px;
    line-height: 48px;
    padding: 0 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: #0f454e;
    border-radius: 50px;
    color: #ececec;
    outline: 0;
    overflow: hidden;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: .1em;
    font-weight: bold;
    transition: all .4s ease;
    border: 2px solid #a7a8ab;
}
.kavepug-mikalen span {
  display: block;
  height: 48px;
  line-height: 48px;
}
.kavepug-mikalen:after {
  content: attr(data-text);
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(100%);
}
.kavepug-mikalen:after, .kavepug-mikalen span {
  transition: all .45s cubic-bezier(0.83,.01,.29,.99);
}
.kavepug-mikalen:hover {
  box-shadow: 0 0.4375rem 2.25rem rgba(224, 219, 219, 0.26);
  background: #1a4c71;
  color: #f8fafb;
}
.kavepug-mikalen:hover span {
  opacity: 0;
  transform: translateY(-100%);
}
.kavepug-mikalen:hover:after {
  opacity: 1;
  transform: translateY(0%);
}

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

Демонстрация
Прикрепления: 5697369.png(10.3 Kb) · 9873903.png(10.0 Kb) · css.zip(1.9 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2019-03-21, 00:27 | Сообщение 2
Администраторы
Сообщений:20711
Награды: 56


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

Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффект кнопки при наведении в CSS (Применение hover эффектов CSS при наведении курсора)
  • Страница 1 из 1
  • 1
Поиск: