Кнопка купить на CSS – это простая кнопка-ссылка, выполненная с помощью CSS с добавлением псевдоэлемента :after. Она удобны тем, что текст неизменяемой части кнопки можно прописать в стилях CSS, например слово “Купить”, “Скачать”, и т.п.
СSS
В СSS вам следует обратить внимание на два момента:
- Псевдоэлементом :after. В стиле с этим псевдоэлементом находится свойство content, которое и задает слово после содержимого ссылки. В коде ниже это слово “Купить”. При необходимости замените его на свое.
- Цвета кнопок вынесены в отдельные классы стилей, так удобнее в последствии варьировать цветом кнопок на сайте.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | /*Кнопка Купить*/ /*Основа кнопки*/ .pricebutton a{ display: inline-block; color: #000000!important; 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!important;} /*красный цвет кнопки*/ .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
Соответственно, в месте отображения кнопки вставляете следующий код, где указываете основной стиль, и стиль выбранного цвета кнопки:
1 2 3 4 5 | <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