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 — довольно гибкий и мощный инструмент, который способен сделать любую статичную страницу красивой, наполненной движением и эффектами.
Простой эффект поворота на 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

Наборы интересных и веселых смайлов, которые всегда смогут оживить чат.

Подробнее

FAQ по CSS

Ответы на часто задаваемые вопросы по настройке общих стилей.

Подробнее

Pop-Up окно

Всплывающее окно позволяет открыть чат с любой страницы сайта.

Подробнее