ボタンホバー時のエフェクトについて

前提・実現したいこと

ボタンのhover時、下記のようなエフェクトを実装したいです。
なお、hover時のborder線の太さは1px、二重線の間隔は6pxというのが条件です。
通常時hover時

発生している問題・エラーメッセージ

hover時のデザインである丸角の二重線を表現するのに苦戦をしております。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <title>jissen</title>
8  </head>
9<body>
10   <div class="following">
11    <div class="following-content">      
12      <a href="" class="following-btn">無料相談受付中！</a>
13      <div class="following-border"></div>
14    </div>   
15  </div>
16</body>
17</html>

CSS
1
2.following-content {
3  position: fixed;
4  top: 20px;
5  right: 0;
6  -webkit-writing-mode: vertical-rl;
7  -ms-writing-mode: tb-rl;
8  writing-mode: vertical-rl;
9  width: 75px;
10  height: 216px;
11  text-align: center;
12  box-sizing: border-box;
13  background-color: #EF5350;
14  letter-spacing: 0.2em;
15  line-height: 75px;
16  border-radius: 12px 0 0 12px;
17}
18
19.following-border {
20  position: fixed;
21  top: 26px;
22  right: 6px;
23  line-height: 63px;
24  width: 63px;
25  height: 204px;
26  border: solid 1px #EF5350;
27  border-radius: 12px 0 0 12px;
28  z-index: 2;
29}
30
31.following-btn {
32  display: inline-block;
33  position: relative;
34  width: 75px;
35  height: 216px;
36  font-size: 20px;
37  color: #fff;
38  text-decoration: none;
39  z-index: 1;
40}
41
42.following-btn:hover {
43  width: 75px;
44  height: 216px;
45  line-height: 75px;
46  background: #fff;
47  color: #EF5350;
48  border: solid 1px #EF5350;
49  border-radius: 12px 0 0 12px;
50}

試したこと

hover時のborderプロパティをboder: solid 1px;からborder: double 6px;
に変更➡︎デザインより線が太くなり、細く設定できない。

outlineプロパティ、outline-offsetプロパティを使用し、二重線を作成
➡︎丸角が作れない。

現在hover時の内側の線をdivタグで表現しようと思い、divタグとaタグのz-indexプロパティを調整しておりますが
●divタグのz-indexを大きくすれば二重線はできるが、divタグ内でhover出来なくなる。
●aタグのz-indexを大きくすればボタン全体でhoverエフェクトは効くが、二重線が出来なくなる。

という状況で、解決に至っておりません。

説明不足のところもあるかとは思いますが、どなたかご教授いただけたら幸いです。