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

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

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

HTML:

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

Вариант 1:

Ссылка

Вариант 2:

Ссылка

Вариант 3:

Ссылка

Вариант 4:

Ссылка

Вариант 5:

Ссылка

Вариант 6:

Ссылка

Вариант 7:

Ссылка

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

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

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

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

  • вася:

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

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

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

    Ответить