• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Простая анимация кнопок на чистом CSS3 (Красивые CSS3 кнопки с анимацией и hover эффектами)
Простая анимация кнопок на чистом CSS3
Kosten
Суббота, 23 Мая 2020 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Всегда кнопки на сайте украшают дизайн, но если мы установим простой стиль, но с красивой анимацией, то безусловно такой стиль эффекта будет для большинства оригинален. Как следует из названия этого набора кнопок, эти кнопки CSS просты и понятны в своем дизайне. Они предлагают скользящий цвет со всех сторон, а также заполнение от центра. Ниже приведен подборка кнопок с различными анимированными эффектами CSS, которые вы можете добавить на свой сайт с помощью довольно простого CSS.



Код
<div class="wrapper">
  <button class="slide_from_left">SLIDE FROM LEFT</button>
  <button class="slide_from_right">SLIDE FROM RIGHT</button>
  <button class="slide_from_top">SLIDE FROM TOP</button>
  <button class="slide_from_bottom">SLIDE FROM BOTTOM</button>
  <hr>
  <button class="grow_box">GROW BOX</button>
  <button class="grow_ellipse">GROW ELLIPSE</button>
  <button class="grow_skew_forward">GROW SKEW →</button>
  <button class="grow_skew_backward">GROW SKEW ←</button>
  <button class="grow_spin">GROW SPIN</button>
</div>

CSS

Код
.wrapper {
  max-width: 65rem;
  width: 100%;
  margin: 2rem auto;
  padding: 5rem;
  text-align: center;
  background: #fff;
  border: 0.5rem solid #34495e;
}
hr {
  border: 0;
  border-bottom: 0.0625rem solid #bbb;
  margin: 3rem 0;
}
button {
  font-size: 2em;
  background: #3498db;
  color: #fff;
  border: 0.25rem solid #3498db;
  padding: 0.85em 0.75em;
  margin: 1rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
button:hover {
  color: #3498db;
}
button::after {
  content: "";
  background: #ecf0f1;
  position: absolute;
  z-index: -1;
  padding: 0.85em 0.75em;
  display: block;
}
button[class^="slide"]::after {
  transition: all 0.35s;
}
button[class^="slide"]:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 0.35s;
}
button.slide_from_left::after {
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
}
button.slide_from_right::after {
  top: 0;
  bottom: 0;
  left: 100%;
  right: -100%;
}
button.slide_from_top::after {
  left: 0;
  right: 0;
  top: -100%;
  bottom: 100%;
}
button.slide_from_bottom::after {
  left: 0;
  right: 0;
  top: 100%;
  bottom: -100%;
}
button[class^="grow"]::after {
  transition: all 0.3s ease;
}
button[class^="grow"]:hover::after {
  transition: all 0.3s ease-out;
}
button.grow_box::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(0, 0);
}
button.grow_box:hover::after {
  transform: scale(1, 1);
}
button.grow_ellipse::after {
  border-radius: 50%;
  left: -50%;
  right: -50%;
  top: -150%;
  bottom: -150%;
  line-height: 8.34em;
  transform: scale(0, 0);
}
button.grow_ellipse:hover::after {
  transform: scale(1, 1);
}
button.grow_skew_forward::after {
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
}
button.grow_skew_forward:hover::after {
  transform: skewX(-45deg) scale(1, 1);
}
button.grow_skew_backward::after {
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(45deg) scale(0, 1);
}
button.grow_skew_backward:hover::after {
  transform: skewX(45deg) scale(1, 1);
}
button.grow_spin::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(0, 0) rotate(-180deg);
}
button.grow_spin:hover::after {
  transform: scale(1, 1) rotate(0deg);
}

На этом все кнопки представлены под выбор.

Демонстрация
Прикрепления: 2468117.png (22.8 Kb) · simple-css-butt.zip (3.9 Kb)
Страна: (RU)
Kosten
Пятница, 29 Мая 2020 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Анимационные кнопки с HTML CSS



HTML

Код
<div class="main">
    <a href="#" class="a1">button</a>
    <a href="#" class="a2">button</a>
    <a href="#" class="a3">button</a>
    <a href="#" class="a4">button</a>
    <a href="#" class="a5">button</a>
</div>

CSS

Код
.main{
   position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}
a {
  
  display :block;
  text-decoration: none;
  margin:20px;
  
  
}
/*the first button*/
.a1{
    position: relative;
    background: linear-gradient(to right, #03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size:400%;
    border-radius:30px;
    
    width: 200px;
    height: 60px;
    line-height:60px;
    text-align:center;
    box-sizing: border-box;
    text-transform: uppercase;
    color:#fff;
    font-size:20px;
}
.a1:hover{
    animation:  a  8s linear Infinite;
}
.a1:before{
   content:"";
   background: linear-gradient(to   right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size:400%;
  position: absolute;
  top:-5px;
  right: -5px;
  left: -5px;
  bottom:-5px;
  z-index: -1;
  border-radius:40px;
  filter: blur(20px);
  opacity: 0;
  transition:0.5s;
}
.a1:hover:before{
  opacity: 1;
  filter: blur(20px);
  animation:  a  8s linear Infinite;
}
@keyframes a {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}
/*the second button*/
.a2{
    
  position: relative;
    width: 200px;
    height: 60px;
    line-height:60px;
    text-align:center;
    box-sizing: border-box;
    text-transform: uppercase;
    color:#fff;
    font-size:20px;
    border:1px solid #fff;
    border-radius:30px;
    transition: all 0.5s ease  ;
}
.a2:before{
   content:"";
  position: absolute;
  background: linear-gradient(to   right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
   background-size:400%;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 0%;
  transition:all 0.6s ease  ;
  z-index: -1;
  border-radius:30px;
}
.a2:after{
   content:"";
   background: linear-gradient(to   right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size:400%;
  position: absolute;
  top:-5px;
  right: -5px;
  left: -5px;
  bottom:-5px;
  z-index: -1;
  border-radius:40px;
  filter: blur(20px);
  opacity: 0;
  transition:0.5s;
}
.a2:hover{
  border:1px solid transparent;
}
.a2:hover:before{
    height: 100%;
  animation:  a 8s linear Infinite;
}
.a2:hover:after{
    opacity: 1;
  filter: blur(20px);
  animation:  a  8s linear Infinite;
}
/*the third button*/
.a3{
     
  position: relative;
    width: 200px;
    height: 60px;
    line-height:60px;
    text-align:center;
    box-sizing: border-box;
    text-transform: uppercase;
    color:#fff;
    font-size:20px;
    border:1px solid #fff;
    border-radius:30px;
    transition: all 0.5s ease  ;
}
.a3:before{
  content:"";
  position: absolute;
  background: linear-gradient(to   right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
   background-size:400%;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 0%;
  height: 100%;
  transition:all 0.6s ease  ;
  z-index: -1;
  border-radius:30px;
}
.a3:after{
   content:"";
   background: linear-gradient(to   right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size:400%;
  position: absolute;
  top:-5px;
  right: -5px;
  left: -5px;
  bottom:-5px;
  z-index: -1;
  border-radius:40px;
  filter: blur(20px);
  opacity: 0;
  transition:0.5s;
}
.a3:hover{
  border:1px solid transparent;
}
.a3:hover:before{
    width: 100%;
  animation:  a 8s linear Infinite;
}
.a3:hover:after{
    opacity: 1;
  filter: blur(20px);
  animation:  a  8s linear Infinite;
}
/*the fourth button*/
.a4{
  overflow: hidden;    
  position: relative;
    width: 200px;
    height: 60px;
    line-height:60px;
    text-align:center;
    box-sizing: border-box;
    text-transform: uppercase;
    color:#fff;
    font-size:20px;
    border:1px solid #fff;
    border-radius:30px;
    transition: all 0.5s ease  ;
}
.a4:before{

  content:"";
  position: absolute;
  background: linear-gradient(to   right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
   background-size:400%;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 100%;
  height: 0%;
  transition:all 0.6s ease  ;
  z-index: -1;
  border-radius:30px;
  
}
.a4:after{
   content:"";
   background: linear-gradient(to   right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size:400%;
  position: absolute;
  top:-5px;
  right: -5px ;
  left: -5px ;
  bottom:-5px ;
  z-index: -1;
  border-radius:40px;
  filter: blur(20px);
  opacity: 0;
  transition:0.5s;
  
}
.a4:hover{
  border:1px solid transparent;
}
.a4:hover:before{
   height: 300%;
  animation:  a 8s linear Infinite;
}
.a4:hover:after{
    opacity: 1;
  filter: blur(20px);
  animation:  a  8s linear Infinite;
}
/*the fifth button*/
.a5{
  overflow: hidden;    
  position: relative;
    width: 200px;
    height: 60px;
    line-height:60px;
    text-align:center;
    box-sizing: border-box;
    text-transform: uppercase;
    color:#fff;
    font-size:20px;
    border:1px solid #fff;
    border-radius:30px;
    transition: all 0.5s ease  ;
}
.a5:before{

  content:"";
  position: absolute;
  background: linear-gradient(to   right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
   background-size:400%;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 100%;
  height: 0%;
  transition:all 0.6s ease  ;
  z-index: -1;
  border-radius:30px;
  
}
.a5:after{
   content:"";
   background: linear-gradient(to   right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size:400%;
  position: absolute;
  top:-5px;
  right: -5px ;
  left: -5px ;
  bottom:-5px ;
  z-index: -1;
  border-radius:40px;
  filter: blur(20px);
  opacity: 0;
  transition:0.5s;
  
}
.a5:hover{
  border:1px solid transparent;
}
.a5:hover:before{
   height: 300%;
  animation:  a 8s linear Infinite;
}
.a5:hover:after{
    opacity: 1;
  filter: blur(20px);
  animation:  a  8s linear Infinite;
}


Демонстрация
Прикрепления: 9762706.png (47.7 Kb) · animation-butto.zip (4.0 Kb)
Страна: (RU)
Kosten
Пятница, 29 Мая 2020 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
CSS кнопки анимации



HTML

Код
<button class="expand">Expand</button>
<button class="shake">Shake</button>
<br>
<button class="shine">Shine</button>
<button class="bounce">Bounce</button>

CSS

Код
button {
        background-color: #e4e4e4;
        color:#000;
        padding: 20px 10px; /* within the button */
        width:300px;
        border: 2px solid rgb(233,171,88);
        border-radius:5px;
        font-size: 18px;
        cursor:pointer;
        margin:10px 10px;/* between buttons */
}

.shine {
background: -moz-linear-gradient(-45deg,  #e4e4e4 0%, #e4e4e4 40%, #e4e4e4 50%, #e4e4e4 60%, #e4e4e4 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e4e4e4), color-stop(40%,#e4e4e4), color-stop(50%,#fff), color-stop(60%,#e4e4e4), color-stop(100%,#e4e4e4));
background: -webkit-linear-gradient(-45deg,  #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
background: -o-linear-gradient(-45deg,  #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
background: -ms-linear-gradient(-45deg,  #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
background: linear-gradient(135deg,  #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#e4e4e4',GradientType=1 );
background-repeat: no-repeat;  
background-position:0px;
background-size:300%;  
}

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

/* Shine when hover -*/
@keyframes shine {
  0% { background-position:-600px; }
  100% { background-position:0px; }
}
      
@-webkit-keyframes shine {
  0% { background-position:-600px; }
  100% { background-position:0px; }
}

/* Bounce when hover -*/
.bounce:hover {
  animation:bounce 1s;
    -webkit-animation:bounce 1s;
    background-color:rgb(233,171,88);
}

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

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

.expand:hover {
  letter-spacing:15.0px;
  transition-delay: 0s;
    -webkit-transition-delay: 0s;  
    background-color:rgb(233,171,88);
}

/* Shake when hover-*/
.shake:hover {
   animation-duration: 1s;
   animation-name: shake;
   background-color:rgb(233,171,88);
}

@keyframes shake {
  0% { transform:rotate(0deg); }
  29% { transform:rotate(0deg); }
  30% { transform:rotate(1deg); }
  31% { transform:rotate(2deg); }
  33% { transform:rotate(1deg); }
  35% { transform:rotate(0deg); }
  37% { transform:rotate(-1deg); }
  39% { transform:rotate(-2deg); }
  41% { transform:rotate(-1deg); }
  43% { transform:rotate(0deg); }
  45% { transform:rotate(1deg); }
  47% { transform:rotate(2deg); }
  49% { transform:rotate(1deg); }
  51% { transform:rotate(0deg); }
  53% { transform:rotate(-1deg); }
  55% { transform:rotate(-2deg); }
  57% { transform:rotate(-1deg); }
  59% { transform:rotate(0deg); }
  100%{ transform:rotate(0deg); }

}


Демонстрация
Прикрепления: 1357532.png (8.7 Kb) · css-animation-b.zip (4.2 Kb)
Страна: (RU)
Kosten
Пятница, 29 Мая 2020 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Анимированные кнопки на CSS



HTML

Код
<div class="group">
  <button class="blam">Blam</button>
  <button style="-webkit-animation-delay: .3s;animation-delay: .3s;" class="syke">Syke</button>
  <button style="-webkit-animation-delay: .6s;animation-delay: .6s;" class="later">Later</button>
    </div>

CSS

Код
  .group{
   text-align: center;
   margin: 20px auto;
  }
  .group button{
   margin-top: 10px;
  }
  button{
/*   box-sizing: border-box;*/
   background: NONE;
   border: none;
   outline: none;
   border-radius: 3px;
   padding: 15px 70px;
   color:white;
   text-transform: uppercase;
   font-weight: 700;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.41);
   box-shadow: 0 3px 0 0 #383838;
   border:3px solid transparent;
   
  
   animation: pulse 1s linear infinite alternate;
   -webkit-animation: pulse 1s linear infinite alternate;
  }
  .active,
  button:active{
   background-image: linear-gradient(rgba(0,0,0,.1) 13%, transparent 13%,transparent);
   box-shadow: 0 1px 0 0 #383838;
   color: rgba(0, 0, 0,.45);
   text-shadow: none;
   
   
   -webkit-animation-play-state: paused;
     animation-play-state: paused;
  }
  button:focus,
  button:hover{
   -webkit-animation-play-state: paused;
     animation-play-state: paused;
  }
  
  
  .blam:focus,
  .blam:hover{
   background-color:#0097bd;
  }
  .blam{
   background-color:#00bff0;
   border-color: #00bff0;
  }
  
  .syke:focus,
  .syke:hover{
   background-color:#ad4e4e;
  }
  .syke{
   background-color:#e06464;
   border-color:#e06464;
  }
  
  .later:focus,
  .later:hover{
   background-color:#7c8b8f;
  }
  .later{
   background-color:#a8bdc2;
   border-color:#a8bdc2;
  }
  
  @-webkit-keyframes pulse {
   100% {
    transform: translateY(6.9px);
   }
  }

  @keyframes pulse {
   100% {
    transform: translateY(6.9px);
   }
  }



See the Pen
6 Buttons animated
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 8739641.png (8.1 Kb) · buttons-animate.zip (3.5 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Простая анимация кнопок на чистом CSS3 (Красивые CSS3 кнопки с анимацией и hover эффектами)
  • Страница 1 из 1
  • 1
Поиск: