• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » 3 кнопки с анимацией CSS и hover эффектами (Подборка из 3 анимационных кнопок для сайта на CSS)
3 кнопки с анимацией CSS и hover эффектами
Kosten
Дата: Четверг, 2019-06-06, 04:03 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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

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



HTML

Код
<button class="light">
  ZorNet.Ru — сайт для вебмастера 1
</button>
<button class="bounce">
ZorNet.Ru — сайт для вебмастера 3
</button>
<button class="letters">
  ZorNet.Ru — сайт для вебмастера 3
</button>

CSS

Код
button{
        padding: 0.8em 0em;
        width:350px;
        background: #ff6e00;
        border-radius:15px;
        border:0;
        color:#fff;
        font-size:1.2em;
        font-family: Arial,Helvetica,sans-serif;
        font-weight:bold;
        cursor:pointer;
        margin:1em 2em;
        text-transform:uppercase;
}
.light{
background: -moz-linear-gradient(-45deg,  #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff6e00), color-stop(40%,#ff6e00), color-stop(50%,#ffffff), color-stop(60%,#ff6e00), color-stop(100%,#ff6e00));
background: -webkit-linear-gradient(-45deg,  #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
background: -o-linear-gradient(-45deg,  #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
background: -ms-linear-gradient(-45deg,  #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
background: linear-gradient(135deg,  #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6e00', endColorstr='#ff6e00',GradientType=1 );
background-repeat: no-repeat;  
background-position:0px;
background-size:300%;  
}

.light:hover{
  animation:light 1s;
    -webkit-animation:light 1s;
  
}

@keyframes light {
  0% {
        background-position:-600px;
  }
  100% {
        background-position:0px;
  }
}
        
@-webkit-keyframes light {
  0% {
        background-position:-600px;
  }
  100% {
        background-position:0px;
  }
}

.bounce:hover{
  animation:bounce 1s;
    -webkit-animation:bounce 1s;
  
}

@keyframes bounce {
  0% {
        border-radius:15px;
  }
  20% {
        border-radius:30px;
  }  
  60% {
        border-radius:0px;
        transform:scale(1.1);
            -ms-transform:scale(1.1); /* IE 9 */
            -webkit-transform:scale(1.1); /* Safari and Chrome */        
  }
  90% {
        transform:scale(0.98);
            -ms-transform:scale(0.98); /* IE 9 */
            -webkit-transform:scale(0.98); /* Safari and Chrome */         
  }
  100% {
        border-radius:15px;     
  }
}
        
@-webkit-keyframes bounce {
  0% {
        border-radius:15px;
  }
  20% {
        border-radius:30px;
  }  
  60% {
        border-radius:0px;
        transform:scale(1.1);
            -ms-transform:scale(1.1); /* IE 9 */
            -webkit-transform:scale(1.1); /* Safari and Chrome */
  }
  90% {
        transform:scale(0.98);
            -ms-transform:scale(0.98); /* IE 9 */
            -webkit-transform:scale(0.98); /* Safari and Chrome */         
  }
  100% {
        border-radius:15px;     
  }
}     

.letters{
  white-space:nowrap;
  overflow:hidden;
  transition: letter-spacing 3s;
    -webkit-transition: letter-spacing 3s; /* Safari */
  transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
}

.letters:hover{
  letter-spacing:15.5px;
  transition-delay: 0s;
    -webkit-transition-delay: 0s;  
}

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

Демонстрация
Прикрепления: 1361973.png(7.2 Kb) · 4887461.zip(2.1 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » 3 кнопки с анимацией CSS и hover эффектами (Подборка из 3 анимационных кнопок для сайта на CSS)
  • Страница 1 из 1
  • 1
Поиск: