Stylized Buttons: 5 стильных ховер-эффектов для кнопок

Stylized Buttons: 5 стильных ховер-эффектов для кнопок: 11 комментариев

1. А куда можно этот код добавить в WordPress?

   Ответить

2. А так, будто бы, даже интереснее.
   .from-middle:after {
   top: 0;
   left: 50%;
   height: 100%;
   width: 0;
   background: var(—inv);
   transform: translateX(-50%);
   }
   .from-middle:hover:after {
   width: 100%;
   }

   Ответить

3. Как вставить кнопку в LPgenerator? Там есть, куда разместить скрипты html и отдельно есть поле, в котором можно прописать стили css для каждого элемента (для блоков, текстов, кнопок и т.д.) Кнопки красивые, а разобраться не могу, куда, что разместить 🙁

   Ответить

   1. Я точно не знаю, как устроено в LPgenerator. Но суть размещения данных кнопок проста. В файле css нужно для начала прописать общие стили, которые указываются для всех кнопок. Это все что в разделе /* ~~~~~~~ INIT. BTN ~~~~~~~ */
      .btn {
      position: relative;
      padding: 1.4rem 4.2rem;
      padding-right: 3.1rem;
      font-size: 1.4rem;
      color: var(—inv);
      letter-spacing: 1.1rem;
      text-transform: uppercase;
      transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
      cursor: pointer;
      user-select: none;
      }

      .btn:before, .btn:after {
      content: »;
      position: absolute;
      transition: inherit;
      z-index: -1;
      }

      .btn:hover {
      color: var(—def);
      transition-delay: .6s;
      }

      .btn:hover:before {
      transition-delay: 0s;
      }

      .btn:hover:after {
      background: var(—inv);
      transition-delay: .4s;
      }
      А далее уже выбираете конкретную кнопку, например
      /* From Top */

      .from-top:before,
      .from-top:after {
      left: 0;
      height: 0;
      width: 100%;
      }

      .from-top:before {
      bottom: 0;
      border: 1px solid var(—inv);
      border-top: 0;
      border-bottom: 0;
      }

      .from-top:after {
      top: 0;
      height: 0;
      }

      .from-top:hover:before,
      .from-top:hover:after {
      height: 100%;
      }

      И уже в HTML файле выводите данную кнопку с помощью соответствующего кода <div class=»btn from-top»>From Top</div>

      Ответить

      1. А можно внутри HTML разместить все без подключения файла css?

         Ответить

         1. Просто к LPgenerator можно подключать файлы только с расширением txt, xml, htm, html

            Ответить

         2. Да, можно, если прописать это все в
            http://htmlbook.ru/html/style

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

            Ответить

            1. Вы так снисходительны, спасибо большое! Извините за некомпетентность, я действительно не разбираюсь, просто очень кнопки красивые. У меня почти получилось вроде, здесь: http://www.tutmnogo-go.ru/black-mebel1/
               только что-то не так. Взгляните, если не затруднит:
               внутри тега head прописал следующее:

               .btn {
               position: relative;
               padding: 1.4rem 4.2rem;
               padding-right: 3.1rem;
               font-size: 1.4rem;
               color: var(—inv);
               letter-spacing: 1.1rem;
               text-transform: uppercase;
               transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
               cursor: pointer;
               user-select: none;
               }

               .btn:before, .btn:after {
               content: »;
               position: absolute;
               transition: inherit;
               z-index: -1;
               }

               .btn:hover {
               color: var(—def);
               transition-delay: .6s;
               }

               .btn:hover:before {
               transition-delay: 0s;
               }

               .btn:hover:after {
               background: var(—inv);
               transition-delay: .4s;
               }

               .from-top:before,
               .from-top:after {
               left: 0;
               height: 0;
               width: 100%;
               }

               .from-top:before {
               bottom: 0;
               border: 1px solid var(—inv);
               border-top: 0;
               border-bottom: 0;
               }

               .from-top:after {
               top: 0;
               height: 0;
               }

               .from-top:hover:before,
               .from-top:hover:after {
               height: 100%;
               }

               а затем в отдельном html-блоке код
               From Top

               и стиль у него прописал
               style type=»text/css»

               вот здесь:
               http://joxi.ru/n2YbYgjijqj8pA

               анимация не работает, но шрифт, как у кнопки…

            2. Я вряд ли смогу что-то объяснить, учитывая что никогда не работал с данным конструктором — тут нужно сидеть и разбираться, как у них что устроено.

4. Последний вопрос. Может еще вот это надо куда-то разместить? Если да, то в каких тегах?
   *, *:before, *:after {
   box-sizing: border-box;
   }

   body {
   —def: #96B7C4;
   —inv: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   height: 100vh;
   width: 100%;
   background-image: linear-gradient(-25deg, #616161 0%, #96B7C4 100%);
   }

   html {
   font-size: 12px;
   font-family: ‘Playfair Display’, serif;
   }

   div {margin-bottom: 3rem;}
   div:last-child {margin-bottom: 0;}

   Ответить

   1. Нет, это общий стиль для body.

      Ответить