• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание анимации для кнопки сайта в CSS (Простой вариант анимированной кнопки на HTML И CSS)
Создание анимации для кнопки сайта в CSS
Kosten
Четверг, 21 Марта 2019 | Сообщение 1
Онлайн
Администраторы
Сообщений:44268
Награды: 70
Это простой вариант на кнопку, где подключаем к ней анимацию и она после этого становится совершенно по другому выглядеть. Здесь задействованы стили для создания кнопки, где самостоятельно в стилистике выставляем анимацию, что можно поставить под любой оттенок цвета.

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



HTML

Код
<a class="dekiposam-lovimas" href="http://zornet.ru/">Zornet.Ru</a>

CSS

Код
.dekiposam-lovimas {
    text-decoration: none;
    outline: none;
    display: inline-block;
    padding: 12px 38px;
    margin: 12px 27px;
    position: relative;
    overflow: hidden;
    border: 2px solid #8f1b9e;
    background: #ce37fe;
    color: #f1f1f1;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    transition: .3s ease-in-out;
}
.dekiposam-lovimas:before {
  content: "";
  background: linear-gradient(90deg, rgba(189, 189, 189, 0.03), rgba(236, 235, 235, 0.5));
  height: 48px;
  width: 48px;
  position: absolute;
  top: -7px;
  transform: skewX(-45deg);
  animation: shine 1s linear infinite;
}
@keyframes shine {
  from {left: -75px;}
  to {left: 150px;}
}

Еще одна вариация на трехмерность анимации стилистики CSS кнопок для сайтов.

Демонстрация
Прикрепления: 0857601.png (3.3 Kb) · dekin.zip (1.7 Kb)
Страна: (RU)
Kosten
Четверг, 21 Марта 2019 | Сообщение 2
Онлайн
Администраторы
Сообщений:44268
Награды: 70
Еще один оригинальный вариант кнопки,, что полностью построен на CSS, но подойдет на объявленные дизайн стилистики шаблона. Хотя можно поставить на светлый шаблон и посмотреть, как все выглядит, что вы на demo странице можете оценить.



HTML

Код
<button>Вёрстка</button>

CSS

Код
*{box-sizing: inherit;}
button {
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    border: 4px solid #5099f1;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    top: 0;
    transition: all 0.3s ease 0s;
}
button:hover {
  top: 5px;
}
button:after {
  content: "";
  background-image:
linear-gradient(-45deg, transparent 50%, grey 50%, grey 55%, transparent 55%),
linear-gradient(-45deg, grey 5%, transparent 5%);
  background-color: white;
  background-size: 6px 6px;
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transition: all 0.3s ease 0s;
  z-index: -1;
}
button:hover:after {
  top: -4px;
  left: -4px;
}
Прикрепления: 4731365.png (1.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание анимации для кнопки сайта в CSS (Простой вариант анимированной кнопки на HTML И CSS)
  • Страница 1 из 1
  • 1
Поиск: