• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создаем кнопки с эффектом переход на CSS (Создать динамические кнопочки-ссылки с помощью CSS)
Создаем кнопки с эффектом переход на CSS
Kosten
Дата: Воскресенье, 2019-02-17, 22:39 | Сообщение 1
Администраторы
Сообщений:20411
Награды: 56


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

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

Так по умолчанию они выглядят:



Установка:

HTML

Код
    <div class="keyivaspa-ngational">
    <a href="#" class="nakavacon-uanovation">Наведите меня!</a>
    <a href="#" class="nakavacon-uanovation-2">Удивительная кнопка</a>
    </div>


CSS

Код
.keyivaspa-ngational {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -86px;
    margin-left: -89px;
    text-align: center;
}

a {
    -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    -moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    -ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    -o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    display: block;
    margin: 20px auto;
    max-width: 175px;
    text-decoration: none;
    border-radius: 3px;
    padding: 18px 27px;
}

a.nakavacon-uanovation {
    color: rgba(44, 31, 82, 0.6);
    box-shadow: rgba(24, 16, 49, 0.4) 0 0px 0px 2px inset;
}

a.nakavacon-uanovation:hover {
    color: rgba(232, 231, 231, 0.85);
    box-shadow: rgba(17, 16, 47, 0.7) 0 0px 0px 40px inset;
}

a.nakavacon-uanovation-2 {
    color: rgba(27, 15, 64, 0.61);
    box-shadow: rgba(20, 13, 41, 0.4) 0 0px 0px 2px inset;
}

a.nakavacon-uanovation-2:hover {
    color: rgba(249, 243, 243, 0.85);
    box-shadow: rgba(20, 25, 60, 0.7) 0 80px 0px 2px inset;
}


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

Демонстрация
Прикрепления: 7549496.png(6.5 Kb) · nsav.zip(1.8 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создаем кнопки с эффектом переход на CSS (Создать динамические кнопочки-ссылки с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: