Как подключить картинку через CSS к разным состояниям одной и той же кнопки?

Здравствуйте. Помогите, пожалуйста, решить проблему подключения разных картинок к кнопке. То есть, например, по нажатии на кнопку (например, в виде стрелки) она переходит в состояние "неактивной", или "в фокусе", либо вновь "активной". При этом я пытался добиться результата без js (это подошло бы для кнопки изменения цветовой темы), а с помощью подключения src к css напрямую к состоянию кнопки. Т.е.,

.btn {
    background: src('../normalbtn.svg');
} 
.btn:active {
    background: src('../activebtn.svg');
}

↑ примерно таким образом это, как мне кажется, должно работать. Подскажите, что я делаю не так?

Ниже приведена кнопка в разных состояниях, к которой хотелось применить данное действие.

.btn {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none;
    border-radius:10px;
    box-shadow: 0 0 6px 6px solid #16265F;
    padding:15px;
    min-height:30px; 
    min-width: 120px;
    align: center;
}
.btn:hover {
    background-color:#002ead;
    transition: 0.7s;
}
.btn:focus {
    background-color:#3AFF00;
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
    transition: 0.7s;
}
.btn:active {
    background-color: #ffbf00;
}

<button class="btn"> Нажмите здесь</button>

Заранее благодарю!

Прошу прощения, если ошибся где-нибудь в составлении вопроса, так как я его впервые создаю на данном Сайте, хотя и длительное время использую его.