Как сделать стильную кнопку с двумя цветами как у Apple

Question

Помогите сделать точно такую кнопку, проблема в разделении цветами и фоном для SVG
Заранее спасибо! вот что у меня вышло

<button class="button1"><span class="icon"></span>Save Changes</button>

.button1 {
    background-color: #a50089a4;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}
.button1 .icon {
    background: url(https://www.flaticon.com/svg/static/icons/svg/929/929574.svg) no-repeat;
    float: left;
    width: 20px;
    height: 20px;
    padding: 10px;
    margin-right: 10px

}  
.button1 .span {
    border: 3px solid #fff;
    float: left;
    width: 20px;
    height: 20px;
}

Answer 1

.button1 {
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    line-height: 20px;
    font-family: arial, sans-serif;
    cursor: pointer;
    border-radius: 5px;
    padding: 10px 10px 10px 60px;
    position: relative;
    background: linear-gradient(to right, rgba(0,0,0,.2) 50px, rgba(0,0,0,0) 50px, rgba(0,0,0,0)) #764dae;
    box-shadow: 0 3px 6px rgba(0,0,0,.2);
}

.button1::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    bottom: 7px;
    width: 36px;
    background: url(https://www.flaticon.com/svg/static/icons/svg/929/929574.svg) no-repeat center center / contain;
    border-radius: 5px 0 0 5px;
}

.button1.icon-check::before {
    background-image: url(https://www.flaticon.com/svg/static/icons/svg/214/214707.svg);
}

<button class="button1">Save Changes</button>
<br><br>
<a href="#" class="button1 icon-check">Пример ссылки - кнопки</a>

БЛОГ НА HUSL

Как сделать стильную кнопку с двумя цветами как у Apple

Ответы (1 шт):