# CSS Button effects not working across browsers

**URL:** <https://forum.kirupa.com/t/css-button-effects-not-working-across-browsers/641458>\
**Category:** Uncategorized\
**Created:** [December 30, 2019, 2:41am UTC](https://forum.kirupa.com/t/css-button-effects-not-working-across-browsers/641458 "2019-12-30T02:41:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [December 30, 2019, 2:41am UTC](https://forum.kirupa.com/t/css-button-effects-not-working-across-browsers/641458/1 "2019-12-30T02:41:09Z")

</div>

Having a few issues with a CSS Button effects not working across browsers.

It displays as I would like it in Chrome, but not Firefox.

Can’t seem to find the root of the problem. Here is what I have.

[Fiddle](https://jsfiddle.net/postcolonialboy/wn0y71zs/)

`<a class="soft">Button</a>`

```
a.soft {display: inline-block;font-family:'Varela Round', sans-serif;padding:2rem3rem;font-size:1.25vw;box-shadow:-10px-10px20px0#E6E6E6,10px10px20px0#ABABAB, inset 10px10px20px0#E6E6E6, inset -10px-10px20px0#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)2px2px5px;font-weight: bolder;}

a.soft:hover {background-color:#ddd;box-shadow:-10px-10px20px0#E6E6E6,10px10px20px0#ABABAB, inset 10px10px20px0#E6E6E6, inset -10px-10px20px0#ABABAB;color:#888;}

a.soft:active {box-shadow:0020px0#E6E6E6,0020px0#ABABAB, inset 0020px0#E6E6E6, inset 0020px0#ABABAB;color:#D8D8D8;text-shadow:1px1px2px white;-webkit-background-clip: text;font-weight: bolder;}
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 30, 2019, 5:24pm UTC](https://forum.kirupa.com/t/css-button-effects-not-working-across-browsers/641458/2 "2019-12-30T17:24:21Z")

</div>

What is the look you are going for? It looks different in Chrome, Firefox, and Safari 😛

Even in Chrome, what you see and what you defined in markup doesn’t seem to match. Can you post a short screen capture of what you are seeing and would like to ensure is mimicked across all the browsers?