a タグにcss で装飾はできないでしょうか？
ボタンを横並びにして（flex)一つを非活性、リンクなしのグレーアウトさせたいです。
イメージ図を添付しますので、どなたかご教示お願い致します。
cssが反映しないのはなぜでしょうか？

===html====

<div class="box1">
 <div class="titlle">ボタン横並び</div>
<div class="btns">
<a class="btn1" href="https://〜">ボタン１</a>
<a class="btn1" href="https://〜">ボタン2</a>
<a class="btn3" href="#">ボタン３</a>

<div class="box2">
 <div class="titlle">ボタン横並び2</div>
<div class="btns">
<a class="btn1" href="https://〜">ボタン１</a>
<a class="btn1" href="https://〜">ボタン2</a>
<a class="btn3" href="#">ボタン３</a>

===css===

.box1 .btns {
  color: #73aed4;
  border-color: #73aed4;
}
.box1 .btns:hover {
  color: #1376b6;
  background-color: #aacee5;
  border-color: #
}
a.btn3{color: #111010;
  border-color: #2f3132;
}

nami_0514

2023/05/16 02:57

ボタン一つだけ非活性にしたいのですが、aタグにクラスを指定しましたが、色が反映されません。どなたか教えていただけないでしょうか泣

int32_t

2023/05/16 03:00

非活性の<a>の上で右クリック→検証をして、どんなスタイルが適用されているか確認してください。

yambejp

2023/05/16 03:03 編集

ボタンの非活性化とは、アンカーをクリックしても遷移しないということでしょうか？それはcssの作業ではありませんが・・・それとhtmlはきちんとタグを閉じましょう、バグの温床になります

NKTIDKSG

2023/05/16 03:03

単純にタイプミスでは？ a.btan3 ではなく、a.btn3 です。

nami_0514

2023/05/16 03:19

@NKTIDKSGさんありがとうございます！ @yambejpさんありがとうございます！アンカーをクリックしても遷移しないです！こちらはhtmlでやるんですね。タグや、バグについてもコメントありがとうございます。ご教示いただいた皆様初めて質問するので、不慣れですみません。 css追記しました。色は画像と合っていないのですが、そこは無視してください。皆様ありがとうございます。色は変わったのですが、今度はボタンの枠がなくなって混乱しています。もう少し自分で進めてみようと思います。また、後ほどご相談させていただくかと思いますが、何卒よろしくお願い致します。

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

回答2件

ボタンの非活性化とは、アンカーをクリックしても遷移しないということでしょうか？

アンカーをクリックしても遷移しないです！

cssでするべきことかという議論はあると思いますが、
cssでするなら、pointer-events: none;を設定すればいいでしょう。

pointer-events - CSS: カスケーディングスタイルシート | MDN

css
1.btns a.btn3{
2  background-Color: gray;
3  border-color: #2f3132;
4  pointer-events: none;
5}

投稿2023/05/16 03:37

hatena19

総合スコア33699

nami_0514

2023/05/16 04:19

ありがとうございます！🙇‍♀️🙇‍♀️ 時間がかかると思いますが、後ほど試したいと思います！

nami_0514

2023/05/16 05:04

この度は、回答誠にありがとうございました。わかりやすく教えてくださりとても勉強になりました。また機会がございましたら、何卒宜しくお願い致します。

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

ベストアンサー

参考

javascript
1<style>
2.btns{
3  display:flex;
4}
5.btns a{
6  display:block;
7  width:100px;
8  height:50px;
9  background-Color:red;
10}
11.btns a:not(:first-child){
12  margin-left:40px;
13}
14.btns a.btn3{
15  background-Color:#111010;
16  border-color: #2f3132;
17}
18</style>
19<script>
20document.addEventListener('click',e=>{
21  if(e.target.closest('.btn3')){
22    e.preventDefault();
23  }
24});
25</script>
26<div class="box1">
27  <div class="titlle">ボタン横並び</div>
28  <div class="btns">
29    <a class="btn1" href="#1">ボタン１</a>
30    <a class="btn1" href="#2">ボタン2</a>
31    <a class="btn3" href="#3">ボタン３</a>
32  </div>
33</div>
34<div class="box2">
35  <div class="titlle">ボタン横並び2</div>
36  <div class="btns">
37    <a class="btn1" href="#1">ボタン１</a>
38    <a class="btn1" href="#2">ボタン2</a>
39    <a class="btn3" href="#3">ボタン３</a>
40  </div>
41</div>

参考

javascriptをscriptタグで指定しないバージョン
onclick属性に"return false"を記載すればHTMLだけ(?)でも動作します

HTML
1<style>
2.btns{
3display:flex;
4}
5.btns a{
6display:block;
7width:100px;
8height:50px;
9  background-Color:red;
10}
11.btns a:not(:first-child){
12  margin-left:40px;
13}
14.btns a.btn3{
15  background-Color:#111010;
16border-color: #2f3132;
17}
18</style>
19<div class="box1">
20  <div class="titlle">ボタン横並び</div>
21  <div class="btns">
22    <a class="btn1" href="#1">ボタン１</a>
23    <a class="btn2" href="#2">ボタン2</a>
24    <a class="btn3" href="#3" onclick="return false">ボタン３</a>
25  </div>
26</div>
27<div class="box2">
28  <div class="titlle">ボタン横並び2</div>
29  <div class="btns">
30    <a class="btn1" href="#1">ボタン１</a>
31    <a class="btn2" href="#2">ボタン2</a>
32    <a class="btn3" href="#3" onclick="return false">ボタン３</a>
33  </div>
34</div>