白抜きボタンをホバーしたときにCSSでアニメーションしながら背景色と文字色を反転する #CSS

こんな感じです。

1つのクラスで全て記述しても問題ありませんが、背景色・文字色・余白・幅を変えられるように別のクラスで記述して指定しています。

<html>
<head>
<title>test</title>
</head>
<style>

/* btn はベースのスタイル。汎用性を高めるために背景色と文字色を別で指定する */
.btn {
    text-align: center;
}
.btn a {
    position: relative; 
    display: block;
    color: #fff;
    transition: .6s ease;
    text-decoration: none;
}
.btn a span {
    position: relative;
    z-index: 2;
}
.btn a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    transition: .4s ease; 
    transform: scale(0, 1);
    transform-origin: center left;
}
.btn a:hover::before {
    opacity: 1;
    transform: scale(1, 1);
}

/* 背景色と文字色、上下の余白・幅の指定 */
.btn-red {
    width: 300px;
    border: solid #bb000c 1px;
}
.btn-red a {
    background: #bb000c;
    padding: 5px 0;
}
.btn-red a:hover {
    color: #bb000c;
}

</style>
<body>

<div class="btn btn-red"><a href="#"><span>Button</span></a></div>

</body>
</html>