Форма входа

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

    Вы здесь: Главная страница » Файлы » Кнопки / иконки
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

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

    Дата добавления: 03.03.2017 - 15:19
    Категория: Кнопки / иконки
    Добавил: Buger
    Количество просмотров: 1.4k
    Количество комментариев: 0
    Размер файла: 12.9 Kb
    Рейтинг материала: 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/
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: