Можно ли сделать такую кнопку на CSS?

Question

[AltaiR]

Пытался сделать такую кнопку
Сперва попробовал путем добавления псевдоэлементов с бордерами но тогда остается проблема того, что не могу добавить белую рамку вокруг кнопки и не могу добавить градиент псевдоэлементам (углам).

Пошел другим путем и решил добавить два псевдоэлемента и повернуть их с помощью transform: rotate(45deg); и задать им бордеры(белые) только там где нужно. И вроде бы получилось то, что нужно но остается один косяк. Псевдоэлементы поверх кнопки и z-index не помогает.


Может есть какой то другой способ? Строго не судите я начинающий)

Comments

[Котик Антон]

А лишние бордеры через border-bottom-style: none не убираются?

Answer 1

[Nikolay Talanov]

codepen.io/suez/pen/b4c15bba590bb45c177002a1f7e45477
С градиентом!

Answer 2

[Олег]

Идеально и чисто на CSS сделать сложно, лучше svg, а так вот:
http://codepen.io/werty1001/pen/qNjJKo

Answer 3

[Котик Антон]

Попробуй задать кнопке position: relative, а псевдоэлементам отрицательный z-index:
codepen.io/anon/pen/bZRxyO

Answer 4

[Sergey Loysha]

z-index: -1; -только для :before,:after
codepen.io/sergeyloysha/pen/jAwZpW