Experiencing some challenges with CSS Button effects not functioning consistently across different browsers.
The display is satisfactory in Chrome, but not in Firefox.
Struggling to pinpoint the source of the issue. Here is my current setup:
a.soft {
display: inline-block;
font-family: 'Varela Round', sans-serif;
padding: 2rem 3rem;
font-size: 1.25vw;
box-shadow: -10px -10px 20px 0 #E6E6E6, 10px 10px 20px 0 #ABABAB, inset 10px 10px 20px 0 #E6E6E6, inset -10px -10px 20px 0 #ABABAB;
border-radius: 50px;
transform: box-shadow 1s ease-in-out;
background-color: #666666;
-webkit-background-clip: text;
color: transparent;
text-shadow: rgba(245, 245, 245, 1.0) 2px 2px 5px;
font-weight: bolder;
}
a.soft:hover {
background-color: #ddd;
box-shadow: -10px -10px 20px 0 #E6E6E6, 10px 10px 20px 0 #ABABAB, inset 10px 10px 20px 0 #E6E6E6, inset -10px -10px 20px 0 #ABABAB;
color: #888;
}
a.soft:active {
box-shadow: 0 0 20px 0 #E6E6E6, 0 0 20px 0 #ABABAB, inset 0 0 20px 0 #E6E6E6, inset 0 0 20px 0 #ABABAB;
color: #D8D8D8;
text-shadow: 1px 1px 2px white;
-webkit-background-clip: text;
font-weight: bolder;
}<a class="soft">Button</a>