Оформление кнопок на CSS

Когда нужно быстро поставить на сайт симпатичную кнопку или ссылку, начинаешь искать готовое решение в поисковиках. И находишь, как правило, сборники, где у кнопки множество классов: один общий для всех, другой для конкретной кнопки, третий для эффекта. Или чересчур сложные решения, с массой тегов. А потом еще кнопку нужно подправить под ссылку и т.д. В этой заметке я постарался максимально все упростить.

Все кнопки имеют красивые ховер эффекты и всего один класс atuin-btn

HTML:

Обратите внимание: тег <input> не имеет псевдоэлементов :before и :after, поэтому внешний вид этих кнопок отличается от <button> и <a>. Эти отличия можно посмотреть в примерах.

Вариант 1:

Ссылка

Вариант 2:

Ссылка

Вариант 3:

Ссылка

Вариант 4:

Ссылка

Вариант 5:

Ссылка

Вариант 6:

Ссылка

Вариант 7:

Ссылка

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Олег Витальевич:

    В 4 примере не могу разобраться как рамку которая по кругу идет другим цветом сделать. Подскажите будьте добры

    Ответить
    • Alexander:
      	border-top-color: #337AB7;
      	border-right-color: #337AB7;
      	border-bottom-color: #337AB7;
      	border-left-color: #337AB7;
      Ответить
  • Дмитрий:

    Здравствуйте.
    С CSS я на Вы и не соображу как текст "Ссылка" переместить в центр кнопки. Спасибо.

    Ответить
    • Alexander:

      Она и должна по центру быть
      А если кнопка стоит во всю ширину (display: flex;)
      То чтобы текст был центру, нужно добавить: justify-content: center;

      Ответить
  • Серж:

    На сайте работают, а в мобильной версии нет(((

    Ответить
    • Alexander:

      Попробуйте добавить к ховерам актив и фокус, например:

      Было:

      .atuin-btn:hover:before {...}

      Сделать:

      .atuin-btn:hover:before,
      .atuin-btn:active:before,
      .atuin-btn:focus:before {...}

      Завтра обновлю CSS, полезное замечание!

      Ответить
  • Marss:

    Очень круто)) Спасибо!

    Ответить
  • вася:

    милый человек огромное спасибо

    Ответить
  • Александр:

    А кнопочек в Блоге не хватало :))
    Давно ждал.
    Спасибо!

    Ответить