# Possible to use CSS to style two different types of buttons?

**URL:** <https://community.glideapps.com/t/possible-to-use-css-to-style-two-different-types-of-buttons/51146>\
**Category:** Ask for Help\
**Created:** [October 7, 2022, 4:21pm UTC](https://community.glideapps.com/t/possible-to-use-css-to-style-two-different-types-of-buttons/51146 "2022-10-07T16:21:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [October 7, 2022, 4:21pm UTC](https://community.glideapps.com/t/possible-to-use-css-to-style-two-different-types-of-buttons/51146/1 "2022-10-07T16:21:06Z")

</div>

I use two types of button styles in the same screen - a filled in one and one with an outline.

I really want to use a different color button so I used the following CSS

```auto
<pre><span><style>
[data-test="app-button-view"] {
background: #c94d37 !important;
color: white !important;
}

```

Which works - just a little too well as all buttons now becomes this style - which makes sense.  
But is there a way to have two different styles of buttons when using CSS?

---

<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:** [October 7, 2022, 4:59pm UTC](https://community.glideapps.com/t/possible-to-use-css-to-style-two-different-types-of-buttons/51146/2 "2022-10-07T16:59:55Z")

</div>

yeah, it’s possible but fiddly. You need to target each button individually using `screenScrollView` and `:nth-of-type`

So something like the following:

```auto
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type(3) button {
    background-color: "red";
}
div[id*='screenScrollView']> div > :nth-of-type(4) button {
    background-color: "blue";
}

```

It may take a bit of trial and error to get the correct `nth-of-type` values, and these will be affected by other components on the same screen. _AND_ they will change if you start re-arranging components.

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [October 10, 2022, 9:05am UTC](https://community.glideapps.com/t/possible-to-use-css-to-style-two-different-types-of-buttons/51146/3 "2022-10-10T09:05:57Z")

</div>

Ok, got it!  
Maybe this is a bit of a last minute treatment when everything is working…

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [October 11, 2022, 9:06am UTC](https://community.glideapps.com/t/possible-to-use-css-to-style-two-different-types-of-buttons/51146/4 "2022-10-11T09:06:13Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.