Как создать индивидуальные кнопки css без помощи изображений?

Question

[r31rus]

Есть 2 глянцевые кнопки css jsfiddle.net/1ak06xdm

Подскажите как сделать в них 2 изящные стрелочки без помощи изображений "вверх" и "вниз"

Answer 1

[Никита Лавренко]

через псевдоэлемент :after или :before
получится нечто следующее:

Стрелка вверх и вниз:

.btn:before {
  content''; 
  position: absolute;
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

Стрелки в другие стороны можно глянуть здесь:
css-tricks.com/snippets/css/css-triangle

Вместо border можно вставлять в свойство content символ из шрифтов либо юникода. Часто в шрифтах есть наборы иконок.
Если есть набор иконок, то можно прописать кнопке в html дополнительные классы, вроде icon arrow-down и псевдоэлемент с нужной иконкой будет вставлен в кнопку.

Comments

[r31rus]

Простите а вы не могли-бы показать на примере? Просто вставить любые стрелки в эти кнопки jsfiddle.net/1ak06xdm

Answer 2

[Тимофей Белоусов]

Вот, дальше сами стилизуете.

Comments

[r31rus]

Огромное спасибо!!!

Answer 3

[r31rus]

Покажите пожалуйста пример в jsfiddle.net/1ak06xdm если не трудно. Спасибо