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

Скачать / Посмотреть на CodePen

See the Pen Stylized Buttons by Paraskevas Ntinakis (@perry_nt) on CodePen.

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

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

  2. Как вставить кнопку в 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. Да, можно, если прописать это все в
          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. Я вряд ли смогу что-то объяснить, учитывая что никогда не работал с данным конструктором — тут нужно сидеть и разбираться, как у них что устроено.

  3. Последний вопрос. Может еще вот это надо куда-то разместить? Если да, то в каких тегах?
    *, *: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;}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *