角丸のボタンに影をつけると角のある影になる

Question

角丸のボタンに影を付けようとしています。
やりたいことは、画像の影の大きさで上下左右対象に影をぼやかす事です。
しかし、cssで影の指定をすると以下の画像のようになります。

html
<a href="#"target="_blank"><button class="submit">#</button></a>

css

.submit {
    
    width: 240px;
    height: 45px;
    border-radius: 15px;
    filter: drop-shadow(0px 0px 40px #ff0000);    
    
}
  
  
  
  
  

---

box-shadowで同様に指定しても結果は一緒でした。
上下左右対象に影をぼやかして、影の角も丸くするには指定の仕方が違うのでしょうか。

Comments

[mari.rinn]

CSSにoutline:none;を加えるのと、shadowの色番号はrgbで指定の方が良いかもですね。これでやるとどうなりますか？

[yucom]

回答ありがとうございます！
全ての要素にoverflow: auto;を設定していた事が原因だったようです。

Answer 1

普通は影も広がるはずですので、推測ですが、ボタンの親要素にoverflow: hidden;が設定されていませんか。

症状再現サンプル

Comments

[yucom]

回答ありがとうございます！
全ての要素に対してoverflow: auto;が設定されていました。
おそらく余白が出来て設定したのかと思いますが
今となっては何故設定したか不明です。
コメントアウト しとくべきでした。。

[yucom]

overflow: auto;を消したらやりたい事が出来ました。
ありがとうございます。