Effects for buttons
Более 15 различных эффектов для кнопок Вашего чата
В наше время анимация кнопок как нельзя актуальна, так как современные интерфейсы требуют высокой степени интерактивности и простоты, чего как раз и можно достичь с помощью грамотной 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 — это тот элемент, к которому цепляется наша анимация.
@-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);
}
}
В результате у нас получается кнопка №1
Далее мы мы по аналогии выбираем class или id кнопок, которые хотим анимировать и выбираем эффекты:
Эффект пульсации
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(0,0,0, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(0,0,0, 0);
box-shadow: 0 0 0 10px rgba(0,0,0, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
box-shadow: 0 0 0 0 rgba(0,0,0, 0);
}
}
Эффект резинки
#join-chat-button:hover {
-webkit-animation: rubberBand 0.6s ease; /* анимация и скорость в секундах */
animation: rubberBand 0.6s ease;
}
@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: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
#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(1.5);
}
Эффект увеличения кнопок
Полностью вставляете код и пользуетесь.
#join-chat-button,
#join-chat-button2 {
transition: transform 1s;
}
#join-chat-button:hover,
#join-chat-button2:hover {
transform: scale(2);
}
3-D эффект с тенью
#join-chat-button,
#join-chat-button2 {
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: .3s;
}
#join-chat-button:hover,
#join-chat-button2:hover {
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.4);
transform: translateY(-3px);
}
Создаем рамку внутри кнопки
#join-chat-button,
#join-chat-button2 {
box-shadow: 0 0 1px 0 #333 inset, 0 0 1px 0 #333;
transition: 150ms ease-in-out;
}
#join-chat-button:hover,
#join-chat-button2:hover {
box-shadow: 0 0 1px 1px #333 inset, 0 0 0 0 #333;
}
Исчезновение кнопки при клике
#join-chat-button:focus,
#join-chat-button2:focus {
-webkit-animation: anim-effect-boris 0.3s forwards;
animation: anim-effect-boris 0.3s forwards;
}
@-webkit-keyframes anim-effect-boris {
0% {
-webkit-transform: scale3d(0.3, 0.3, 1);
transform: scale3d(0.3, 0.3, 1);
}
25%, 50% {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
}
@keyframes anim-effect-boris {
0% {
-webkit-transform: scale3d(0.3, 0.3, 1);
transform: scale3d(0.3, 0.3, 1);
}
25%, 50% {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
}
Исчезновение кнопки с возвратом
#join-chat-button:focus,
#join-chat-button2:focus {
-webkit-animation: anim-effect-simo-1 5s forwards;
animation: anim-effect-simo-1 5s forwards;
}
@-webkit-keyframes anim-effect-simo-1 {
0%, 100% {
-webkit-transform: scale3d(0, 0, 1);
transform: scale3d(0, 0, 1);
opacity: 0;
}
5%, 95% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes anim-effect-simo-1 {
0%, 100% {
-webkit-transform: scale3d(0, 0, 1);
transform: scale3d(0, 0, 1);
opacity: 0;
}
5%, 95% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
Жужжащая кнопка
#join-chat-button:hover,
#join-chat-button2:hover {
-webkit-animation-name: buzz;
animation-name: buzz;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes buzz {
50% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
100% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}
@keyframes buzz {
50% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
100% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}
Объемная кнопка
#join-chat-button,
#join-chat-button2 {
box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, 1px 1px 1px #000;
}
#join-chat-button:active,
#join-chat-button2:active {
top: .1em;
left: .1em;
box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset;
}
Кнопка с тенью и рамкой
#join-chat-button,
#join-chat-button2 {
box-shadow:
0 1px rgba(255,255,255,.2) inset,
0 3px 5px rgba(0,1,6,.5),
0 0 1px 1px rgba(0,1,6,.2);
transition: .2s ease-in-out;
}
#join-chat-button:active,
#join-chat-button2:active {
top: 1px;
box-shadow:
0 0 1px rgba(0,0,0,.5) inset,
0 2px 3px rgba(0,0,0,.5) inset,
0 1px 1px rgba(255,255,255,.1);
}
Опускающаяся кнопка при клике
#join-chat-button,
#join-chat-button2 {
box-shadow:
0 6px rgba(0,0,0, 0.02),
0 3px 15px rgba(0,0,0,.4),
inset 0 1px rgba(255,255,255,.3),
inset 0 0 3px rgba(255,255,255,.5);
transition: .2s;
}
#join-chat-button:active,
#join-chat-button2:active {
box-shadow:
0 2px rgba(0,0,0, 0.2),
0 1px 6px rgba(0,0,0,.4),
inset 0 1px rgba(255,255,255,.3),
inset 0 0 3px rgba(255,255,255,.5);
-webkit-transform: translate(0, 4px);
transform: translate(0, 4px);
}
Эффект пульсации с повторениями
#join-chat-button,
#join-chat-button2 {
-webkit-animation: pulses 3s infinite ease-in-out;
-o-animation: pulses 3s infinite ease-in-out;
-ms-animation: pulses 3s infinite ease-in-out;
-moz-animation: pulses 3s infinite ease-in-out;
animation: pulses 3s infinite ease-in-out;
}
@-webkit-keyframes pulses {
0% { -webkit-transform: scale(0.9); opacity: 0.7; }
50% { -webkit-transform: scale(1); opacity: 1; }
100% { -webkit-transform: scale(0.9); opacity: 0.7; }
}
@keyframes pulses {
0% { transform: scale(0.9); opacity: 0.7; }
50% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.9); opacity: 0.7; }
}
Другие примеры анимации вы легко сможете найти сами в интернете.
С этим разделом смотрят:
Все об иконках
Информация об иконках в чате. Узнайте как сменить или убрать их в своем чате.
Смайлы для chatovod
Наборы интересных и веселых смайлов, которые всегда смогут оживить чат.