# Css to change color of form button

**URL:** <https://community.glideapps.com/t/css-to-change-color-of-form-button/19949>\
**Category:** Ask for Help\
**Created:** [December 16, 2020, 1:37pm UTC](https://community.glideapps.com/t/css-to-change-color-of-form-button/19949 "2020-12-16T13:37:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [December 16, 2020, 1:37pm UTC](https://community.glideapps.com/t/css-to-change-color-of-form-button/19949/1 "2020-12-16T13:37:39Z")

</div>

hi,

I want to change the color of form button from the standard theme color to make it a better user experience…  
please share a CSS example.

thank you

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [December 16, 2020, 2:00pm UTC](https://community.glideapps.com/t/css-to-change-color-of-form-button/19949/2 "2020-12-16T14:00:47Z")

</div>

![2020-12-16 08.59.49](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/d/6d2b736772ea868082f19e1f6c2e51f213fa825c.gif)

```auto
<pre><span><style>
[data-test="app-button-view"] {
background-color: #00b703 !important;
border-color: #00b703 !important;
}
[data-test="app-button-view"]:active {
background-color: red !important;
border-color: red !important;
}

```

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [December 16, 2020, 2:07pm UTC](https://community.glideapps.com/t/css-to-change-color-of-form-button/19949/3 "2020-12-16T14:07:17Z")

</div>

thanks @Robert_Petitto

---

<div class="post-metadata">

**Author:** ![wjcv06](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wjcv06/32/12747_2.png) [@wjcv06](https://community.glideapps.com/u/wjcv06)\
**Post date:** [December 17, 2020, 6:37am UTC](https://community.glideapps.com/t/css-to-change-color-of-form-button/19949/4 "2020-12-17T06:37:08Z")

</div>

¿What If I have more than 1 button and only want to change the color of one of them? 😕

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 17, 2020, 1:26pm UTC](https://community.glideapps.com/t/css-to-change-color-of-form-button/19949/5 "2020-12-17T13:26:25Z")

</div>

Then each button needs to have a different style, so each button has a separate class name. With separate class names, you can change the CSS to make each individual button look how you want, but the CSS is much more vulnerable to breaking and you have to determine the class name assigned to each device and browser type.

I explain it better here.

> [@Floating Form Button](https://community.glideapps.com/t/floating-form-button/16623/120):
>
> This is the CSS I’m currently using. \<pre\>\<span\>\<style\> [data-test=app-button-view] {position:fixed; width:60px; height:60px; right:5%; border-radius:50px; text-align:center; box-shadow: 2px 2px 3px #999 !important; font-size:40px; font-weight: normal; background-color: rgba(41, 87, 122, 0.118) !important; backdrop-filter: blur…

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 17, 2020, 3:21pm UTC](https://community.glideapps.com/t/css-to-change-color-of-form-button/19949/6 "2020-12-17T15:21:12Z")

</div>

Would the `nth-child()` approach work here? (I’m guessing no?)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [December 17, 2020, 3:31pm UTC](https://community.glideapps.com/t/css-to-change-color-of-form-button/19949/7 "2020-12-17T15:31:43Z")

</div>

No because they’re siblings, not parent/children

I tried several ways and couldn’t get it to work. I really thought `:first-of-type` would work but it doesn’t.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 17, 2020, 3:32pm UTC](https://community.glideapps.com/t/css-to-change-color-of-form-button/19949/8 "2020-12-17T15:32:44Z")

</div>

yah, that makes sense