Как сделать псевдокнопку независимой от фона в CSS? ⇐ CSS

[Anonymous]

Я попытался создать собственную кнопку, используя псевдоэлементы CSS. Я тоже могу это сделать, но это зависит от фона. Я имею в виду, что один из псевдоэлементов должен быть того же цвета, что и фон div. Например, если я хочу поместить кнопку на изображение или градиентный фон, возникает проблема. Как я могу сделать что-то подобное, что не зависит от цвета фоновых объектов?
Мой подход:

Код: Выделить всё

.teno-btn {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #fff;
font-weight: 700;
font-size: 15px;
background-color: #000644;
padding: 17px 40px;
margin: 0 auto;
/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20); */
}
.teno-btn span {
position: relative;
z-index: 1;
}
.teno-btn:after {
content: "";
position: absolute;
left: 40px;
top: 40px;
height: 40px;
width: 100px;
background: #ffffff;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.teno-btn:before {
content: "";
position: absolute;
left: 20px;
top: 40px;
height: 40px;
width: 100px;
transform: rotate(45deg);
background: #5ceb95;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(0deg);
}

Код: Выделить всё

 Download Now 

Вот моя ожидаемая кнопка, которую я могу использовать в любом фоновом режиме или где угодно:



Подробнее здесь: https://stackoverflow.com/questions/793 ... ton-in-css