Кнопки CSS «скачать», «купить» выполненные с помощью псевдоэлемента :after

CSS кнопки купить

Это простые кнопки-ссылки, выполненные с помощью CSS с добавлением псевдоэлемента :after. Они удобны тем, что текст неизменяемой части кнопки можно прописать в стилях CSS, например слово «Купить», «Скачать», и т.п.

СSS

В СSS вам следует обратить внимание на два момента:

      Псевдоэлементом :after. В стиле с этим псевдоэлементом находится свойство content, которое и задает слово после содержимого ссылки. В коде ниже это слово «Купить». При необходимости замените его на свое.
      Цвета кнопок вынесены в отдельные классы стилей, так удобнее в последствии варьировать цветом кнопок на сайте.

Таким образом, изменить слово «Купить» на свое собственное, вы можете только в стилях CSS

HTML

Соответственно, в месте отображения кнопки вставляете следующий код, где указываете основной стиль, и стиль выбранного цвета кнопки:

Удобные кнопочки получились. Я их использую для продажи товаров на этом сайте с помощью сервиса kassa.io


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

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

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