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

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

СSS

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

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

Цвета кнопок вынесены в отдельные классы стилей, так удобнее в последствии варьировать цветом кнопок на сайте.

/*Кнопка Купить*/
/*Основа кнопки*/.pricebutton a{
display: inline-block;
color: #000000;
font-size: 135%;
font-weight: 700;
padding-left: 15px;
text-decoration: none;
border-radius: 5px;
margin: 30px;
  }

.pricebutton a:after {
display: inline-block;
content: "Купить"; 
color: #fff;
font-size: 90%;
font-weight: bold;
padding: 12px 15px 10px 15px;
margin-left: 15px;
margin-right: -1px;
}

.pricebutton a:hover {text-decoration: none;}

/*красный цвет кнопки*/.pbred a{border: 2px solid #c61e40;}
.pbred a:after {
 background: linear-gradient(#d4536d, #c61e40) no-repeat 100% 0;
 transition: .3s;}
.pbred a:hover:after {
  background: linear-gradient(#c61e40, #d4536d) no-repeat 100% 0;
}

/*синий цвет кнопки*/.pbblue a{border: 2px solid #19aba0;}
.pbblue a:after {
 background: linear-gradient(#1ec8bb, #19aba0) no-repeat 100% 0;
 transition: .3s;}
.pbblue a:hover:after {
  background: linear-gradient(#19aba0, #1ec8bb) no-repeat 100% 0;}

/*зеленый цвет кнопки*/.pbgreen a{border: 2px solid #248b36;}
.pbgreen a:after {
 background: linear-gradient(#2ba541, #248b36) no-repeat 100% 0;
 transition: .3s;}
.pbgreen a:hover:after {
  background: linear-gradient(#248b36, #2ba541) no-repeat 100% 0;}
/*желтый цвет кнопки*/
.pbyellow a{border: 2px solid #eae31b;}
.pbyellow a:after {
 background: linear-gradient(#f9f23c, #eae31b) no-repeat 100% 0;
 transition: .3s;}
.pbyellow a:hover:after {
  background: linear-gradient(#eae31b, #f9f23c) no-repeat 100% 0;}
/*серый цвет кнопки*/
.pbgrey a{border: 2px solid #a4a4a3;}
.pbgrey a:after {
 background: linear-gradient(#babab8, #a4a4a3) no-repeat 100% 0;
 transition: .3s;}
.pbgrey a:hover:after {
  background: linear-gradient(#a4a4a3, #babab8) no-repeat 100% 0;}
/**END-Кнопка Купить**/

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

HTML

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

<div class="pricebutton pbred"><a href="/"  target="_blank">1$</a></div>
<div class="pricebutton pbblue"><a href="/"  target="_blank">1$</a></div>
<div class="pricebutton pbgreen"><a href="/"  target="_blank">1$</a></div>
<div class="pricebutton pbyellow"><a href="/"  target="_blank">1$</a></div>
<div class="pricebutton pbgrey"><a href="/"  target="_blank">1$</a></div>

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