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

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

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

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

HTML5

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

Q&A

解決済

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

sosuke
sosuke

総合スコア1

CSS3

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

HTML5

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

2回答

0グッド

0クリップ

194閲覧

投稿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/ツールのバージョンなど)

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

1

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

総合スコア2231

spoofy_dragon👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

自己解決

Cocodo 様

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

投稿2022/12/01 07:28

sosuke

総合スコア1

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

HTML5

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