Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Красивый эффект кнопки на CSS

Дата добавления: 03.03.2017 - 15:19
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 188
Количество комментариев: 0
Размер файла: 12.9Kb
Рейтинг материала: 5.0 / 1
Красивый эффект кнопки на CSS
рейтинг 5.0
/
голосов 1
Красивый вид кнопки с крутым эффектом при наведении и нажатии на нее. Очень интересная реализация, которую вы можете использовать в своих проектах или на сайтах. Установка и подключение тривиальна, думаю что сложностей с этим у вас не возникнет. Ну а если все же появятся трудности или вопросы, оставляйте комментарии к данному материалу. Демонстрацию можете посмотреть скачав файл и открыть его в браузере.
И так, приступим к установке.

Установка:
Для начала нам нужно подключить библиотеку FontAwesome (если она у вас не подключена), которая будет выводить шрифтовые иконки на кнопке, до и после нажатия. Подключать будем напрямую из CDN
Код
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

Далее подключаем стили css
Код
<style class="cp-pen-styles">
  @import url('https://fonts.googleapis.com/css?family=Oswald:400,600');
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
   
  body {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #ccffdc;
  overflow: hidden;
  }
   
  .container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  }
   
  button {
  position: relative;
  width: 200px;
  height: 70px;
  border: none;
  border-radius: 5px;
  font-size: 1.5em;
  background-color: #ff6600;
  color: #fff;
  padding: 0 10px;
  font-family: 'Oswald', sans-serif;
  outline: 0;
  }
   
  button:hover {
  cursor: pointer;
  -webkit-animation: moveButton 0.4s ease forwards;
  animation: moveButton 0.4s ease forwards;
  }
   
  .bar,
  .load {
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 95%;
  height: 5px;
  background-color: #b34700;
  border-radius: 20px;
  opacity: 0;
  box-sizing: border-box;
  margin: 0 4.5px;
  }
   
  .load {
  background-color: #fff;
  z-index: 1;
  width: 0%;
  }
   
  button:active {
  outline: 0;
  }
   
  button:hover .bar {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  }
   
  button:hover > strong > i {
  -webkit-animation: tremble 0.5s 0.4s ease;
  animation: tremble 0.5s 0.4s ease;
  }
   
  button:hover .load {
  opacity: 1;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  }
   
  .loading {
  position: absolute;
  top: 0px;
  left: -5px;
  width: 100%;
  opacity: 1;
  -webkit-transition: all 5s 0.1s linear;
  transition: all 5s 0.1s linear;
  }
   
  button.complete {
  background-color: #4EBA4E;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  }
   
  button.complete .bar,
  button.complete strong,
  button.complete .load {
  opacity: 0;
  }
   
  button.complete:before {
  content: '\f00c';
  font-family: 'fontawesome';
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-weight: 600;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(1.2);
  transform: translateX(-50%) scale(1.2);
  color: #fff;
  font-size: 1.5em;
  opacity: 0;
  -webkit-animation: appear 0.5s 0.2s ease-in-out forwards;
  animation: appear 0.5s 0.2s ease-in-out forwards;
  }
   
  @-webkit-keyframes appear {
  from {
  opacity: 0;
  }
  to {
  opacity: 1;
  }
  }
   
  @keyframes appear {
  from {
  opacity: 0;
  }
  to {
  opacity: 1;
  }
  }
   
  @-webkit-keyframes tremble {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  25% {
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  }
  50% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  75% {
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
  }
  100% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  }
   
  @-webkit-keyframes tremble-end {
  0% {
  -webkit-transform: rotate(0deg) translateX(-50%);
  transform: rotate(0deg) translateX(-50%);
  }
  25% {
  -webkit-transform: rotate(-10deg) translateX(-50%);
  transform: rotate(-10deg) translateX(-50%);
  }
  50% {
  -webkit-transform: rotate(0deg) translateX(-50%);
  transform: rotate(0deg) translateX(-50%);
  }
  75% {
  -webkit-transform: rotate(10deg) translateX(-50%);
  transform: rotate(10deg) translateX(-50%);
  }
  100% {
  -webkit-transform: rotate(0deg) translateX(-50%);
  transform: rotate(0deg) translateX(-50%);
  }
  }
   
  @keyframes tremble {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  25% {
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  }
  50% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  75% {
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
  }
  100% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  }
   
  @-webkit-keyframes moveButton {
  0% {
  width: 200px;
  -webkit-transform: skew(0deg);
  transform: skew(0deg);
  border-radius: 5px;
  }
  10% {
  -webkit-transform: translateY(-12px) skew(-10deg);
  transform: translateY(-12px) skew(-10deg);
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  }
  15% {
  -webkit-transform: translateY(-7px) skew(10deg);
  transform: translateY(-7px) skew(10deg);
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  }
  20% {
  -webkit-transform: translateY(-2px) skew(-15deg);
  transform: translateY(-2px) skew(-15deg);
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  }
  30% {
  -webkit-transform: translateY(0px) skew(15deg);
  transform: translateY(0px) skew(15deg);
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  }
  40% {
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  width: 210px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  }
  50% {
  -webkit-transform: skew(20deg);
  transform: skew(20deg);
  width: 210px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  }
  60% {
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  width: 200px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  }
  70% {
  -webkit-transform: skew(15deg);
  transform: skew(15deg);
  width: 200px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  }
  80% {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
  width: 200px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  }
  90% {
  -webkit-transform: skew(5deg);
  transform: skew(5deg);
  width: 200px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  }
  100% {
  -webkit-transform: skew(0deg);
  transform: skew(0deg);
  width: 200px;
  border-radius: 5px;
  }
  }
   
  @keyframes moveButton {
  0% {
  width: 200px;
  -webkit-transform: skew(0deg);
  transform: skew(0deg);
  border-radius: 5px;
  }
  10% {
  -webkit-transform: translateY(-12px) skew(-10deg);
  transform: translateY(-12px) skew(-10deg);
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  }
  15% {
  -webkit-transform: translateY(-7px) skew(10deg);
  transform: translateY(-7px) skew(10deg);
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  }
  20% {
  -webkit-transform: translateY(-2px) skew(-15deg);
  transform: translateY(-2px) skew(-15deg);
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  }
  30% {
  -webkit-transform: translateY(0px) skew(15deg);
  transform: translateY(0px) skew(15deg);
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  }
  40% {
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  width: 210px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  }
  50% {
  -webkit-transform: skew(20deg);
  transform: skew(20deg);
  width: 210px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  }
  60% {
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  width: 200px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  }
  70% {
  -webkit-transform: skew(15deg);
  transform: skew(15deg);
  width: 200px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  }
  80% {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
  width: 200px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  }
  90% {
  -webkit-transform: skew(5deg);
  transform: skew(5deg);
  width: 200px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  }
  100% {
  -webkit-transform: skew(0deg);
  transform: skew(0deg);
  width: 200px;
  border-radius: 5px;
  }
  }
  </style>

Разметка HTML кода самой кнопки
Код
<div class="container">
  <button type="submit">
  <strong>Отправить <i class="fa fa-paper-plane" aria-hidden="true"></i></strong>
  <span class="bar"><span class="load"></span></span>
  </button>
  </div>

Если у вас не подключена библиотека jQuery (что маловероятно), то подключаем также из CDN:
Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

И теперь остается подключить скрипт для кнопки
Код
<script>
  var lBar = $(".load");
  var bar = $("button span");
  var button = $("button");

  button.on("click", function () {
  lBar.addClass("loading");
  setTimeout(function () {
  lBar.removeClass("loading");
  button.addClass("complete");
  }, 500);
  });
  </script>


Источник: https://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.