ChaTemplate — простые эффекты для кнопок

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

Правило @keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров. 

В чате присутствуют три основных кнопки: две кнопки «Войти в чат» и одна кнопка отправки сообщений.

Каждой кнопке присвоен свой класс и ID:

  • #join-chat-button — кнопка входа внизу чата
  • #join-chat-button2 — кнопка войти в чат на странице входа
  • .chatSendButton — кнопка отправки сообщений

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

Основные события кнопок

/* Кнопка входа при наведении */

#join-chat-button:hover,
#join-chat-button2:hover {
/* Кнопка входа при нажатии */

#join-chat-button:active,
#join-chat-button2:active {

И так, первое с чего стоит начать, это выбрать кнопки, которые вы хотите анимировать при наведении или нажатии. Давайте возьмем две кнопки входа и добавим к ним анимацию при наведении:

#join-chat-button:hover,
#join-chat-button2:hover {
    -webkit-animation: swing 0.6s ease; /* анимация и скорость в секундах */
    animation: swing 0.6s ease;
}

Смотрите, мы с вами выбрали swing — это тот элемент, к которому цепляется наша анимация. Вы увидите её ниже.
В поле ввода CSS правил, вам нужно просто вставить один из представленных кодов и готово!

Эффект «Тряски»
@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
 
@keyframes swing {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
Эффект «Пульсации»
@-webkit-keyframes pulse {
  0% {
 -webkit-box-shadow: 0 0 20px rgba(0,0,0, 0.8);
 }
 50% {
 -webkit-box-shadow: 0 0 20px rgba(0,0,0, 0.4);
 }
 100% {
 -webkit-box-shadow: 0 0 20px rgba(0,0,0, 0.2);
 }
}
Эффект «Тянучки»
@keyframes rubberBand {
  0% {transform: scale(1);}
  30% {transform: scaleX(1.15) scaleY(0.75);}
  40% {transform: scaleX(0.75) scaleY(1.25);}
  60% {transform: scaleX(1.15) scaleY(0.85);}
  100% {transform: scale(1);}
}
Эффект «Вращения» при наведении

Полностью вставляете код и пользуетесь. Цвета можете заменить на собственные.

#join-chat-button,
#join-chat-button2 {
  transition: transform 1s;  
}
#join-chat-button:hover,
#join-chat-button2:hover {
  -webkit-animation: spin 6s linear 0s infinite normal;
  -moz-animation: spin 6s linear 0s infinite normal;
  -ms-animation: spin 6s linear 0s infinite normal;
  -o-animation: spin 6s linear 0s infinite normal;
  animation: spin 6s linear 0s infinite normal;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}

Анимация CSS3 — довольно гибкий и мощный инструмент, который способен сделать любую статичную страницу красивой, наполненной движением и эффектами.

Простой эффект «Осветления кнопок» на CSS3

Полностью вставляете код и пользуетесь. Цвета можете заменить на собственные.

#join-chat-button,
#join-chat-button2 {
    background-color: #4caf50; /* Цвет фона */
    border: 5px solid rgba(255, 255, 255, 0.4); /* Граница (кайма) */
    color: #fff; /* Цвет текста */
    border-radius: 25px; /* Закругление */
    text-shadow: -1px 0 1px rgba(0, 0, 0, 0.25); /* Тень текста */
    font-size: 1em; /* Размер текста */
    transition: .3s; /* Плавность анимации */
    padding: 8px 14px;
    font-weight: normal;
    box-sizing: inherit;
    outline: none;
    cursor: pointer;
}
/* Кнопка входа при наведении */
#join-chat-button:hover,
#join-chat-button2:hover {
    opacity:.7;
}
/* Кнопка входа при нажатии */
#join-chat-button:active,
#join-chat-button2:active {
    opacity:.9;
}
Эффект «Нажатия» для кнопки на чистом CSS3

Полностью вставляете код и пользуетесь. Цвета можете заменить на собственные.

#join-chat-button,
#join-chat-button2 {
  border:0;
  outline: none;
  text-shadow:rgba(255,255,255,0.6) 1px 1px 0;
  position:relative;
  padding:10px 20px;
  background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0, rgb(44,160,202)),
  color-stop(1, rgb(62,184,229))
  );
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 3px 0px 0px #156785, 0px 10px 5px #999;
  -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 3px 0px 0px #156785, 0px 10px 5px #999;
  -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 3px 0px 0px #156785, 0px 10px 5px #999;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 10px 5px #999;
}

#join-chat-button:active,
#join-chat-button2:active {
  top:3px;
  background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
  background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
  background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0, rgb(62,184,229)),
  color-stop(1, rgb(44,160,202))
  );
  -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 3px 3px #999;
  -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 3px 3px #999;
  -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 3px 3px #999;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 3px 3px #999;
}
Простой эффект «Поворота на 360°» на CSS3

Полностью вставляете код и пользуетесь.

#join-chat-button,
#join-chat-button2 {
  transition: transform 1s;   
}
#join-chat-button:hover,
#join-chat-button2:hover {
  transform: rotate(360deg); 
}
Эффект увеличения кнопок

Полностью вставляете код и пользуетесь.

#join-chat-button,
#join-chat-button2 {
  transition: transform 1s;   
}
#join-chat-button:hover,
#join-chat-button2:hover {
  transform: scale(2);
}
Эффект «Заполнения цветом»

Полностью вставляете код и пользуетесь. Цвета можете заменить на собственные.

#join-chat-button,
#join-chat-button2 {
 outline: none;
 border-radius:3px;
 background-image: linear-gradient(to left,transparent,transparent 50%,#333 50%,#333);
 background-position: 100% 0;
 background-size: 200% 100%;
 transition: all .25s ease-in;
}
#join-chat-button:hover,
#join-chat-button2:hover {
background-position: 0 0;
color:#fff;
}
«Ускользающая кнопка» на чистом CSS3

Полностью вставляете код и пользуетесь.

#join-chat-button,
#join-chat-button2 {
  transition: transform 1s;   
}
#join-chat-button:hover,
#join-chat-button2:hover {
  transform: translate(10px, 10px); /* сдвиг влево вправо. 10 меняете на свое значение. Допустимо ставить минус, например -10px */
}
Эффект «Искривления»
#join-chat-button,
#join-chat-button2 {
  transition: transform 1s;   
}
#join-chat-button:hover,
#join-chat-button2:hover {
  transform: skewX(25deg); transform: skewY(10deg); transform: skew(25deg, 10deg);
}

Другие примеры анимации вы легко сможете найти сами в интернете.

  • Николай Рижих

    Класс!!!

  • NoName

    Примеры где