Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
mo3golom
8 лет назад

CSS чайник. Делаем красивую кнопку "подписаться" в стиле Golos`а

Привет! Это будет первая часть небольшого урока как сделать собственную красивую кнопку "подписаться" с анимацей. Поскольку я плохо могу в создание gif в фотошопе,то делал анимированную кнопку весьма необычным способом, а именно с помощью css.

Итак, поехали! Для примера сделаем с вами следующую кнопку:





Начнем с простого, создадим html элемент <div> следующего вида

<div class="button">
  <div class="inline icon"></div>
  <div class="inline text"></div>
</div>

Что есть что в данном коде? Мы создали блок <div> с двумя вложенными в него блоками <div>. Это основа нашей кнопки. У каждого блока есть атрибут class, он необходим для присвоения css класса каждому элементу. Сами классы в css могут иметь различные виды, например:
.className - произвольный класс всегда должен начинаться с точки и присваиваться элементу с помощью атрибута class
tagName - описание стиля блока (т.е. вместо tagName может быть div,p,a,img и другие html тэги) не требует присвоения класса к блоку. Стиль будет применяться ко всем блокам с заданным тэгом.

Есть множество других особенностей при написании названий классов. О них я могу написать отдельный пост, если будет необходимость :)

Продолжим. Мы имеем четыре класса, а именно
.button - описывает общий стиль кнопки
.inline - так как div элементы по умолчанию располагаются друг под другом, данный класс выставляет их в одну линию.
.text - описание стиля текста
.icon - описание стиля иконки

Ниже приведено содержание самих классов:

 .button {
        border:2px solid #4ba2f2;
        width: 260px;
        padding:8px;
      }

  .inline {
      display: inline-block;
      width:50px;
     }

   .icon {
        width:30px;
        vertical-align:middle;
        border-right: 2px solid #4ba2f2;
        padding-right: 10px;
      }

   .text {
      font-size:24pt;
      font-weight:bold;
      font-family:"Helvetica";
      margin-left:6px;
      vertical-align: sub;
      color:#1a5099;
     }

Теперь разберемся какое свойство что делает:
border:2px solid #4ba2f2; - устанавливает синюю границу кнопки, здесь мы указываем толщину границы, её свойство (solid - сплошная линия, dotted - пунктирная линия и т.д.) и цвет границы. Также в примере вы увидите border-right: ... - это значит,что граница будет только справой стороны блока, также можно сделать границу слева, сверху или снизу.
padding:8px; - внутренний отступ, т.е. от границы блока до внутреннего контента будет 8 пикселей отступа. Как и в border: ... здесь имеются свойства для каждой из сторон отдельно.
display: inline-block; - это свойство выстраивает div в одну линию.
vertical-align:middle; - вертикальное расположение (в данному случае по центру). До сих пор не совсем разобрался как правильно работает это свойство, поэтому значение иногда выбирается методом тыка.
font-... - данный свойства описывают текст. В примере задан размер, выделение жирным и семейство шрифтов (через семейство шрифтов можно задать определенный шрифт).
margin - аналогичен padding,только отступ делается с внешней стороны блока, а не с внутренней. В примере используется отступ только для левой стороны.
color:#1a5099; - цвет текста

Описания классов можно писать в файле с расширением css и подключать к основной html странице или же вставлять код в теги <style></style>, как я и cделаю в данном случае.

Конечный код будет выглядеть так:

<style>
 .button {
        border:2px solid #4ba2f2;
        width: 260px;
        padding:8px;
      }

  .inline {
      display: inline-block;
      width:50px;
     }

   .icon {
        width:30px;
        vertical-align:middle;
        border-right: 2px solid #4ba2f2;
        padding-right: 10px;
      }

   .text {
      font-size:24pt;
      font-weight:bold;
      font-family:"Helvetica";
      margin-left:6px;
      vertical-align: sub;
      color:#1a5099;
     }
</style>

<div class="button">
 <div class="inline icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 158 171.8" style="enable-background:new 0 0 158 171.8;" xml:space="preserve"><style type="text/css"> .st0{fill:url(#XMLID_33_);} .st1{fill:url(#XMLID_34_);} .st2{fill:#FFFFFF;} </style><g id="XMLID_16_"><linearGradient id="XMLID_33_" gradientUnits="userSpaceOnUse" x1="17.9143" y1="36.2467" x2="91.7842" y2="36.2467"><stop offset="0" style="stop-color:#FF3F3F"></stop><stop offset="1" style="stop-color:#EB0000"></stop></linearGradient><path id="XMLID_3_" class="st0" d="M70.8,66L70.8,66c12.3-5.1,20.9-17.4,20.9-31.7C91.8,15.4,76.6,0,58,0 C39.3,0,24.1,15.4,24.1,34.3c0,10.3,4.5,19.5,11.6,25.8L17.9,72C17.9,72,53.6,75.1,70.8,66z"></path><linearGradient id="XMLID_34_" gradientUnits="userSpaceOnUse" x1="2.400511e-06" y1="89.2769" x2="157.8291" y2="89.2769"><stop offset="0" style="stop-color:#2482C5"></stop><stop offset="1" style="stop-color:#285FAC"></stop></linearGradient><path id="XMLID_11_" class="st1" d="M143.1,103.5c-17-6.1-40.7,5.7-40.7,5.7s18.3-24.5,17.9-60.7C120.1,22,110.7,13.4,103.5,7 c0.6,3.6,0.9,7.3,0.9,11c0,38.4-23.8,64.2-62.1,64.2c-15.9,0-30.5-0.1-42.2-9c0.2,0.6,1.9,7.9,8.7,15.5c3,3.4,7.1,6.8,12.4,9.7 c17.2,9.3,30.4,10.4,31.7,10.5c0.1,0.1,0.1,0.3,0.2,0.4c0,19.1-13.4,46.4-32.4,46.4c-2.9,0-5.7-0.4-8.4-1c-7.4-1.5-12-5.3-12-5.3 s2.6,19.9,24,21.9c23.5,2.2,34.3-2.9,57.6-17.1c24.9-15.2,43.8-31.3,58.3-27.3c11,3,12.8,20.5,12.8,20.5s3.3-6.9,4.3-13 C158.3,128,160.1,109.6,143.1,103.5z"></path></g><g id="XMLID_14_"><path id="XMLID_12_" class="st2" d="M57.2,11.1c7.1,0,13.5,3.2,17.8,8.2l2.7-2.3c-5-5.7-12.4-9.4-20.5-9.4c-5.7,0-11,1.8-15.4,4.8 l2,2.9C47.6,12.7,52.2,11.1,57.2,11.1z"></path></g></svg>
 </div>
 <div class="inline text">
  подписаться
 </div>
</div>

Как вы заметили в иконке появился довольной большой кусок текста. Это логотип Golos`a в svg формате. На нем я не буду останавливаться, т.к. этот код был выдран с данного сайта :)

Сейчас у нас должна получиться такая кнопка (цвет текста чуть другой,это не суть как важно):





Но мы забыли анимацию! давайте исправим это!
Для того чтобы создать анимацию в css существуют @keyframes , такая чудесная штука в которой вы указываете начальное и конечное состояние свойств.
Для нашего пример данная вещь будет иметь следующий вид:

@keyframes animOffset { 
    from {
       outline-offset:0px;
       outline: 0px solid rgba(75,162,242,1);
    }
    to {
      outline-offset: 10px;
      outline: 2px solid rgba(75,162,242,0);
    }
  }

Давайте разберемся что же мы такое написали.
animOffset - имя нашего кейфрейма, с помощью него мы будем указывать, что нам надо именно эту анимацию.
outline: - подобно border:, но отрисовывается не внутри элемента,а вокруг него, можно сделать так,чтобы линия рисовалась на некотором расстоянии от элемента. В этом нам поможет следующее свойство.
outline-offset: - сдвиг линии на определенное расстояние.

В from мы указываем начальное состояние. У нас это нет внешней линии,сдвиг её равен 0. В to указываем конечно состояние: линия есть,сдвинута на 10 пикселей от блока.
С помощью rgba(75,162,242,0) - мы указываем цвет линии, a - alpha означает прозрачность цвета, это нужно чтобы линия становилась невидимой при удалении от элемента.

Теперь добавить данный кейфрейм к нашей кнопке. В класс .button добавим следующее свойство

animation: animOffset 1s infinite;

здесь мы указываем какую анимацию хотим использовать ,продолжительность и сколько раз повторять (infinite - бесконечно).

В конечном варианте .button выглядит так

 .button {
        border:2px solid #4ba2f2;
        width: 260px;
        padding:8px;
        animation: animOffset 1s infinite;
      }

Добавив анимацию мы получим конечный вариант кнопки! Полный код будет выглядеть так:

<style>
 .button {
        margin:200px;
        border:2px solid #4ba2f2;
        width: 260px;
        padding:8px;
        animation: animOffset 1s infinite;
      }

@keyframes animOffset { 
    from {
       outline-offset:0px;
       outline: 0px solid rgba(75,162,242,1);
    }
    to {
      outline-offset: 10px;
      outline: 2px solid rgba(75,162,242,0);
    }
  }

  .inline {
      display: inline-block;
      width:50px;
     }

   .icon {
        width:30px;
        vertical-align:middle;
        border-right: 2px solid #4ba2f2;
        padding-right: 10px;
      }

   .text {
      font-size:24pt;
      font-weight:bold;
      font-family:"Helvetica";
      margin-left:6px;
      vertical-align: sub;
      color:#1a5099;
     }
</style>

<div class="button">
 <div class="inline icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 158 171.8" style="enable-background:new 0 0 158 171.8;" xml:space="preserve"><style type="text/css"> .st0{fill:url(#XMLID_33_);} .st1{fill:url(#XMLID_34_);} .st2{fill:#FFFFFF;} </style><g id="XMLID_16_"><linearGradient id="XMLID_33_" gradientUnits="userSpaceOnUse" x1="17.9143" y1="36.2467" x2="91.7842" y2="36.2467"><stop offset="0" style="stop-color:#FF3F3F"></stop><stop offset="1" style="stop-color:#EB0000"></stop></linearGradient><path id="XMLID_3_" class="st0" d="M70.8,66L70.8,66c12.3-5.1,20.9-17.4,20.9-31.7C91.8,15.4,76.6,0,58,0 C39.3,0,24.1,15.4,24.1,34.3c0,10.3,4.5,19.5,11.6,25.8L17.9,72C17.9,72,53.6,75.1,70.8,66z"></path><linearGradient id="XMLID_34_" gradientUnits="userSpaceOnUse" x1="2.400511e-06" y1="89.2769" x2="157.8291" y2="89.2769"><stop offset="0" style="stop-color:#2482C5"></stop><stop offset="1" style="stop-color:#285FAC"></stop></linearGradient><path id="XMLID_11_" class="st1" d="M143.1,103.5c-17-6.1-40.7,5.7-40.7,5.7s18.3-24.5,17.9-60.7C120.1,22,110.7,13.4,103.5,7 c0.6,3.6,0.9,7.3,0.9,11c0,38.4-23.8,64.2-62.1,64.2c-15.9,0-30.5-0.1-42.2-9c0.2,0.6,1.9,7.9,8.7,15.5c3,3.4,7.1,6.8,12.4,9.7 c17.2,9.3,30.4,10.4,31.7,10.5c0.1,0.1,0.1,0.3,0.2,0.4c0,19.1-13.4,46.4-32.4,46.4c-2.9,0-5.7-0.4-8.4-1c-7.4-1.5-12-5.3-12-5.3 s2.6,19.9,24,21.9c23.5,2.2,34.3-2.9,57.6-17.1c24.9-15.2,43.8-31.3,58.3-27.3c11,3,12.8,20.5,12.8,20.5s3.3-6.9,4.3-13 C158.3,128,160.1,109.6,143.1,103.5z"></path></g><g id="XMLID_14_"><path id="XMLID_12_" class="st2" d="M57.2,11.1c7.1,0,13.5,3.2,17.8,8.2l2.7-2.3c-5-5.7-12.4-9.4-20.5-9.4c-5.7,0-11,1.8-15.4,4.8 l2,2.9C47.6,12.7,52.2,11.1,57.2,11.1z"></path></g></svg>
 </div>
 <div class="inline text">
  подписаться
 </div>
</div>

как вы могли заметить в классе .button появилось свойство margin:200px;, сделано это исключительно для того,чтобы в последствии удобно было записать анимацию кнопки, о чем я расскажу в следующей записи.

А на сегодня все! Надеюсь вам понравился этот урок. Если у вас возникли какие-либо вопросы, пишите, я с радостью отвечу на них!:)


Подписывайтесь и голосуйте за этот пост!
кнопки "подписаться" для ваших постов на Golos`е



4
125.270 GOLOS
На Golos с February 2017
Комментарии (1)
Сортировать по:
Сначала старые