Для кнопки добавляются свойства overflow: hidden;
и position: relative
, для внутреннего элемента в кнопке (:before или :after подходят лучше всего) добавляется свойство position: absolute;
. Теперь можно двигать иконку, размещенную во внутреннем свойствами left
, top
, bottom
и right
. При этом у кнопки будет присутствовать обтравка.
Пример:
.btn {
background: #555;
padding: 10px 15px 10px 30px;
color: #fff;
border: none;
border-bottom: 3px solid #222;
font-weight: bold;
font-size: 1.2rem;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.btn:before {
content: "♀";
/*background: url('ссылка_на_svg'); /* Вместо content
width: 30px;
height: 30px; /* Размеры иконки */
transform: rotate(-135deg);
color: #fff;
font-weight: bold;
position: absolute;
bottom: -15px;
left: -5px;
font-size: 2rem;
}
<button class="btn">Кнопка</button>