【CSS】囲み枠の中にボタンを設置しようとすると、レイアウトが崩れる

囲み枠の中にリンクボタンを設置すると、画像1枚目のようにレイアウトが崩れてしまいます。（本来であれば画像2枚目のように表示されます。）
そこで質問なのですが、囲み枠の中にボタンを設置してもレイアウトが崩れない方法などありますでしょうか？

CSSのコードは以下になります。
~~ボタン~~

CSS
1.btn-red {
2  display: inline-block;
3  padding: 0.4em 0.73em;
4  text-decoration: none;
5  background: #F88080;/*ボタン色*/
6  color: #fff;/*ボタン色より暗く*/
7  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
8  border-bottom: solid 3px #627295;
9  border-radius: 3px;
10  font-weight: bold;
11  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
12	margin-right:10px;
13	margin-bottom:10px;
14}
15
16.btn-red:active  {
17  -webkit-transform: translateY(4px);
18  transform: translateY(4px);
19  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
20  border-bottom: none;
21}

～囲み枠～

CSS
1.box27 {
2    position: relative;
3    margin: 2em 0;
4    padding: 0.5em 1em;
5    border: solid 3px #62c1ce;
6}
7.box27 .box-title {
8    position: absolute;
9    display: inline-block;
10    top: -27px;
11    left: -3px;
12    padding: 0 9px;
13    height: 25px;
14    line-height: 25px;
15    font-size: 17px;
16    background: #62c1ce;
17    color: #ffffff;
18    font-weight: bold;
19    border-radius: 5px 5px 0 0;
20}
21.box27 p {
22    margin: 0; 
23    padding: 0;
24}

HTML
1<div class="box27">
2    <span class="box-title">ここにタイトル</span>
3    <p class="btn-red" href="https://link-a.net/gate.php?guid=on&amp;mcode=j8q8yvg4&amp;acode=be7nwqk6qc7l&amp;itemid=0">U-NEXT</p><p class="btn-blue" href="https://anime.dmkt-sp.jp/animestore/tp_pc">dアニメストア</p><p class="btn-green" href="https://www.hulu.jp/static/anime_3/?cmp=10297&amp;waad=ciLygHAl&amp;gclid=CjwKCAjwjLD4BRAiEiwAg5NBFvtAVCtmgiaWieTD03Lw52KEaBRKU3k4zwFl90jjFqysZtieDgQJBRoCY64QAvD_BwE">Hulu</p>
4</div>

質問内容が的を得ていなかったら申し訳ありません。
知識が浅く、うまく表現出来ていないかもしれませんが、ご回答頂けますと幸いです。

※追加画像

kei344

2020/07/21 10:29

（質問文は編集できます）HTML/CSSは単体の要素に対する指定ではなく、別のCSS指定や要素の位置関係も影響するため、全体を質問文に提示してください。

yuki84web

2020/07/21 10:58

出来ればHTMLも掲載して下さい

marimokkori0724

2020/07/21 13:28

修正の依頼ありがとうございます。ただ今HTMLを追加させて頂きました。他に追加した方が良い情報などありましたら、教えて頂けますと幸いです。

kei344

2020/07/21 15:01

https://jsfiddle.net/Lxfnt3u7/ 提示されたコードでは状況が再現していません。また、「画像1枚目のようにレイアウトが崩れてしまいます」はどこがどうなっているのが問題なのでしょうか。

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

回答1件

ベストアンサー

css
1.box27 p {
2    line-height: 100%;
3}

pのスタイルが.btnのスタイルの設定を上書きしている

投稿2020/07/21 13:37

編集2020/07/21 15:20

yuki84web

総合スコア1857

marimokkori0724

2020/07/21 13:55

ご回答頂きましてありがとうございます。コードをyuki84webさんの回答通りに書き換えてみたのですが、まだレイアウトが崩れてしまっている状態です。画像を追加させて頂きますので、ご覧いただけますと幸いです。

yuki84web

2020/07/21 13:57

何を持って崩れているというのか分からないのと、CSSも足りていないです

marimokkori0724

2020/07/21 14:37

画像2枚目と比べて、追加画像は明らかにレイアウトが崩れていませんか？また、CSSが足りないとはどういった意味でしょうか？抽象度が高く、理解出来ません。

yuki84web

2020/07/21 15:21 編集

質問文に.btn-blueや.btn-greenのクラスの定義がありません。勝手にこちらで全て.btnに置き換えて共通スタイルとして解釈し、回答を編集します。

marimokkori0724

2020/07/21 23:21

なるほど。そういった意味だったのですね。色以外は全て同じコードだったので、btn-redのみコードを記載すれば良いと判断してしまっていました。すみません。次からは全て記載するようにします。また、yuki84webさんに改めてご提示いただいたコードで解決致しました。的を得ない質問・コメントに根気強く付き合って頂いてありがとうございました。感謝しております。

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