<button type="button" class="button button__add">
<span class="button__plus">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.84296C9 1.29067 8.55228 0.842957 8 0.842957C7.44771 0.842957 7 1.29067 7 1.84296V6.99998H1.84296C1.29067 6.99998 0.842957 7.4477 0.842957 7.99998C0.842957 8.55227 1.29067 8.99998 1.84296 8.99998H7V14.1571C7 14.7094 7.44771 15.1571 8 15.1571C8.55228 15.1571 9 14.7094 9 14.1571V8.99998H14.1571C14.7094 8.99998 15.1571 8.55227 15.1571 7.99998C15.1571 7.4477 14.7094 6.99998 14.1571 6.99998H9V1.84296Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.84296C9 1.29067 8.55228 0.842957 8 0.842957C7.44771 0.842957 7 1.29067 7 1.84296V6.99998H1.84296C1.29067 6.99998 0.842957 7.4477 0.842957 7.99998C0.842957 8.55227 1.29067 8.99998 1.84296 8.99998H7V14.1571C7 14.7094 7.44771 15.1571 8 15.1571C8.55228 15.1571 9 14.7094 9 14.1571V8.99998H14.1571C14.7094 8.99998 15.1571 8.55227 15.1571 7.99998C15.1571 7.4477 14.7094 6.99998 14.1571 6.99998H9V1.84296Z"></path>
</svg>
</span>
Создать рассылку
</button>
.button {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 9px 12px;
border-radius: 8px;
white-space: nowrap;
transition: all 1.3s;
// .button__plus
&__plus {
background: #b8bae0;
flex: 0 0 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
}
// .button__add
&__add {
background: #dfe0f1;
svg {
transition: all 1.3s;
fill: #574594;
width: 14.31px;
height: 14.31px;
}
}
&:hover {
transition-duration: 0s;
color: #fff;
svg {
transition-duration: 0s;
fill: #fff;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.