質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

524閲覧

ボタン内矢印の位置と色変更について

sosuke

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2022/11/30 21:42

前提

snowmonkeyの追加CSS にて、ボタンの構築を行なっています。

実現したいこと

1.ボタン内矢印の位置を文字依存にしたい。具体的には文字右に余白20pxの位置に設定したい。
2.矢印の色を#FFFFFFに変更したい

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

1.ボタン内矢印の位置が調節できない
2.矢印の色がホバーしても変わらない

該当のソースコード

『HTML』

<div class="button09"> <a href="">選ばれる理由</a> </div>

『CSS』
.button09 a {
font-family: 'Shippori Mincho', serif;
display: flex;
justify-content: space-between;
text-align:center;
align-items: center;
position: relative;
margin: 0 auto;
padding: 22px 50px;
width: 297px;
color: #4D372B;
font-size: 16px;
white-space: nowrap;
font-weight: 700;
background-color: #79BD7F;
transition: 0.3s;
text-decoration: none;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
}

.button09 a::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: calc(100% - 2px);
height: calc(100% );
border: 1px solid #4D372B;
transition: 0.2s;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
width: 297px;
}

.button09 a::after {
content: '';
width: 8px;
height: 8px;
border-top: 1px solid #4D372B;
border-right: 1px solid #4D372B;
transform: rotate(45deg);
}

.button09 a:hover::before {
top: 0;
left: 0;
}

.button09 a:hover {
text-decoration: none;
background-color: #79BD7F;
color:#FFFFFF;
}

試したこと

CSS にの書き換えなど行いましたが、ボタンの枠線が外れるなどしてしまい、私の知識でが上手くいきませんでした。

補足情報(FW/ツールのバージョンなど)

基本的な事で申し訳ありません。ググっても自分で解決できず質問させていただきました。
今後にも活かしていきたいので勉強させてください。
宜しくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

1.ボタン内矢印の位置が調節できない

  • justify-content: space-between;のせいで左右に離れてしまっているので、削除。
    • デフォルトは左寄せなのでこれだけでOK。
    • 文字と>の間に余白を開けたいなら、>にmargin-leftをつけるなどする。

2.矢印の色がホバーしても変わらない

  • ホバーした時の見た目のcssを書いてないから変わりません。書きましょう。

css

1.button09 a { 2 font-family: 'Shippori Mincho', serif; 3 display: flex; 4 5 /* 削除 */ 6 /* justify-content: space-between; */ 7 8 text-align: center; 9 align-items: center; 10 position: relative; 11 margin: 0 auto; 12 padding: 22px 50px; 13 width: 297px; 14 color: #4D372B; 15 font-size: 16px; 16 white-space: nowrap; 17 font-weight: 700; 18 background-color: #79BD7F; 19 transition: 0.3s; 20 text-decoration: none; 21 border-bottom-right-radius: 20px; 22 border-top-left-radius: 20px; 23} 24 25.button09 a::before { 26 content: ''; 27 position: absolute; 28 top: -2px; 29 left: -2px; 30 width: calc(100% - 2px); 31 height: calc(100%); 32 border: 1px solid #4D372B; 33 transition: 0.2s; 34 border-top-left-radius: 20px; 35 border-bottom-right-radius: 20px; 36 width: 297px; 37} 38 39.button09 a::after { 40 content: ''; 41 width: 8px; 42 height: 8px; 43 border-top: 1px solid #4D372B; 44 border-right: 1px solid #4D372B; 45 transform: rotate(45deg); 46 47 /* 追加 */ 48 margin-left: 20px; 49 transition: 0.3s; 50} 51 52 53.button09 a:hover { 54 text-decoration: none; 55 background-color: #79BD7F; 56 color: #FFFFFF; 57} 58 59.button09 a:hover::before { 60 top: 0; 61 left: 0; 62} 63 64/* 追加 */ 65.button09 a:hover::after { 66 border-color: #fff; 67}

投稿2022/11/30 22:51

Cocode

総合スコア2314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

Cocodo 様

ご回答ありがとうございます!
実装できました。
ありがとうございました!

投稿2022/12/01 07:28

sosuke

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問