How do I fully remove background from the <button> in CSS?

Question

Imagine I have such a button:

#btnred{
color:#fd9898;
background:none;
border:none;
cursor:pointer;}

And when I hover on it, the box-shadow appears, but it appears behind the background of the button.

#btnred:hover{
box-shadow:0 0 10px  #605894;
transition:0.4s;}

How do I completely remove the background so that box-shadow appears right behind the text of that button?

Answer 1

I think what you want to do is:

• remove the box-shadow entry in CSS
• and use text-shadow instead.

See reference: https://css-tricks.com/almanac/properties/t/text-shadow/