CSSのマウスホバーのアニメーションを崩さないまま、<a>タグの中で改行したい。

###■前提
http://www.webopixel.net/lab/sample/13/1028css3-onepoint/
こちらのデモの4つ目「04.枠線のアニメーション」を使用しています。

###■目的
上のマウスホバーのアニメーションを変えないまま、<a>タグの中で改行したいです。

###■問題
下記CSSだと、丸の中の文字を改行させることができません。

html
1<a href="#" class="btn04">BUTTON</a>

css
1.btn04 {
2    color: #fff;
3    text-decoration: none;
4    text-align: center;
5    position: relative;
6    z-index: 10;
7    display: block;
8    width: 150px;
9    height: 150px;
10    line-height: 150px;
11}
12 
13.btn04::before {
14    content: '';
15    background-color: #dda284;
16    display: block;
17    position: absolute;
18    width: 150px;
19    height: 150px;
20    z-index: -1;
21    border-radius: 50%;
22    box-shadow:
23        0 0 0 0 #fff,
24        0 0 0 0 #dda284;
25    transition: all .2s ease;
26    -webkit-transition: all .2s ease;
27}
28.btn04:hover::before {
29    transform: scale(0.8);
30    -webkit-transform: scale(0.8);
31    box-shadow:
32        0 0 0 25px #fff,
33        0 0 0 27px #dda284;
34}

<br>を途中に書いてもダメですし、、

どなたか、丸の中の文字を、丸の中に収めたまま、改行させるすべをご存知ありませんでしょうか？

###■ベストアンサー後の補足
お二方、ご回答ありがとうございます。
ところでこれって、position:fixed;はできないのでしょうか？

行動規範の内容に同意します

回答2件

HTML
1<a href="#" class="btn04"><div>BUTTON<br>BUTTON</div></a>

CSS
1.btn04 {
2    color: #fff;
3    display: block;
4    height: 150px;
5    /*line-height: 150px;*//* 削除 */
6    margin: 0 auto;
7    position: relative;
8    text-align: center;
9    text-decoration: none;
10    width: 150px;
11    z-index: 10;
12}
13.btn04 > div {/* 追加 */
14    left: 50%;
15    position: absolute;
16    top: 50%;
17    transform: translate(-50%, -50%);
18}
19.btn04::before {
20    background-color: #dda284;
21    border-radius: 50%;
22    box-shadow: 0 0 0 0 #fff, 0 0 0 0 #dda284;
23    content: "";
24    display: block;
25    height: 150px;
26    position: absolute;
27    transition: all 0.2s ease 0s;
28    width: 150px;
29    z-index: -1;
30}
31
32.btn04:hover::before {
33    box-shadow: 0 0 0 25px #fff, 0 0 0 27px #dda284;
34    transform: scale(0.8);
35}
36```**動くサンプル：**[https://jsfiddle.net/92zjsth0/](https://jsfiddle.net/92zjsth0/)

投稿2016/10/08 02:21

kei344

総合スコア69398

kei344

2016/10/08 02:21

かぶってしまった・・・。

退会済みユーザー

2016/10/08 02:25

あはは笑、かぶっちゃいましたね。こちらも試すと、ううむ、さすがケイさんですな。なんでもよくご存知で… いずれのご回答も甲乙つけがたく、今回は先着順で採用させて頂きました。m(__)m

行動規範の内容に同意します

ベストアンサー

HTML
1<a href="#" class="btn04"><span>BUT<br>TON</span></a>

CSS
1.btn04 {
2    position: relative; /*追加*/
3    color: #fff;
4    text-decoration: none;
5    text-align: center;
6    position: relative;
7    z-index: 10;
8    display: block;
9    width: 150px;
10    height: 150px;
11    /*line-height: 150px;*/
12}
13.btn04 span {
14   position: absolute;
15   top: 50%;
16   left: 50%;
17   transform: translate(-50%,-50%);
18}
19/*以下略*/