# Button block in different colors

**URL:** <https://community.glideapps.com/t/button-block-in-different-colors/73110>\
**Category:** Ask for Help\
**Created:** [May 6, 2024, 11:45am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110 "2024-05-06T11:45:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [May 6, 2024, 11:45am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/1 "2024-05-06T11:45:03Z")

</div>

Hi, has anyone developed block button in different colors?

 ![IMG_6452](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/0/20392312c9bb06081bfeee9726cfc2be26ef44a8.jpeg)

Like this, but button has different color including icon color

Thanks

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 6, 2024, 2:18pm UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/2 "2024-05-06T14:18:34Z")

</div>

I’ll set up some time to log an item in the CSS library for you tomorrow my time if no one has done so by that time.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 6, 2024, 2:27pm UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/3 "2024-05-06T14:27:45Z")

</div>

Customize “BtnName” with your own button name.

```auto
[aria-label="BtnName"]{
background-color: rgba(0, 255, 0, 0.1);
}
[aria-label="BtnName"] > div{
color: red;
}
[aria-label="BtnName"] svg {
fill: green;
}

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 6, 2024, 11:55pm UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/4 "2024-05-06T23:55:21Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/2/52404737c028764035a9e128c6ac338a05e6fdbd.png)

Applying Himaladin’s code, we can get something like this.

```auto
[aria-label="Rezultati"]{
background-color: red;
}

[aria-label="Rezultati"] > div{
color: white;
}

[aria-label="Rezultati"] svg {
fill: white;
}

[aria-label="Raspored"]{
background-color: gold;
}

[aria-label="Raspored"] > div{
color: black;
}

[aria-label="Rezultati"] svg {
fill: black;
}

[aria-label="Preostali"]{
background-color: green;
}

[aria-label="Preostali"] > div{
color: white;
}

[aria-label="Preostali"] svg {
fill: white;
}

[aria-label="Odložení"]{
background-color: darkblue;
}

[aria-label="Odložení"] > div{
color: white;
}

[aria-label="Odložení"] svg {
fill: white;
}

```

---

<div class="post-metadata">

**Author:** ![Carbonsquare](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carbonsquare/32/55224_2.png) [@Carbonsquare](https://community.glideapps.com/u/Carbonsquare)\
**Post date:** [May 7, 2024, 12:20am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/5 "2024-05-07T00:20:13Z")

</div>

The power of CSS for doing things like this is undeniable, but I would much rather Glide also give us back the ability to quickly format the buttons in the Button Bar from the component settings.

Yeah they gave us a few new formatting options with this…

 ![New Button Block](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/c/2c5c7d82aaf3423a1b1d51d1d341fee52efeb903.png)

But forgot to allow for **ACCENT ALL!** (seems like a simple add)

But WHY take away our ability to natively style the buttons as Show as: Filled, Transparent, Bordered or Simple as we could in the Old Apps Button Bar for individual buttons?

 ![Show as](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/6/66041fc8ae22c245f786f363133ccc6ad026c02b.png)

Again CSS does wonders but if you are trying to NO CODE then we might need a little more help out of the box in UI design options. Hope those little design nuances are on the future horizon. 🙂

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 7, 2024, 12:50am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/6 "2024-05-07T00:50:21Z")

</div>

Does this work on the maker plan as well?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 7, 2024, 12:57am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/7 "2024-05-07T00:57:34Z")

</div>

There should be no difference in CSS for different plans.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 7, 2024, 12:58am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/8 "2024-05-07T00:58:34Z")

</div>

All newest paid plans should have access to it.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 7, 2024, 1:00am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/9 "2024-05-07T01:00:25Z")

</div>

ok, thanks! now I just have to learn to use CSS. 🙂

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 7, 2024, 1:01am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/10 "2024-05-07T01:01:52Z")

</div>

You have [the library](https://css-library.glide.page/dl/library) to help if you need anything.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 7, 2024, 1:06am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/11 "2024-05-07T01:06:48Z")

</div>

thanks, I have it bookmarked. I wasn’t successful using CSS but after browsing the library a couple weeks ago and noticed that you put information in 2 different places. I think it was somewhere in the main settings, and then on the components settings.  
I’ll give it a try again this week.

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [May 7, 2024, 6:46am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/12 "2024-05-07T06:46:47Z")

</div>

Fantastic. Thanks!!!

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [May 7, 2024, 8:43am UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/13 "2024-05-07T08:43:15Z")

</div>

> [@ThinhDinh](#):
>
> `aria-label`

Not sure what I should put here (which class name):

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/4/447d271c570e920b85d20c9dbb778650357ce670.png)

---

<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:** [May 7, 2024, 12:54pm UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/14 "2024-05-07T12:54:56Z")

</div>

Is it working as is? I don’t think you need to assign a class name. The CSS above is only referring to the button labels instead of button classes. That setting is there so you can give each component a class name of your choosing, but you don’t always have to use it.

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [May 7, 2024, 1:34pm UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/15 "2024-05-07T13:34:47Z")

</div>

definitely no change as I pasted the code. Included css preview…

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 7, 2024, 1:42pm UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/16 "2024-05-07T13:42:03Z")

</div>

As Jeff said, only the button’s name/label is important, since it’s referenced in the code.

Can you send a screenshot to see what you pasted in the CSS box? I assume this one?

> [@Button block in different colors](https://community.glideapps.com/t/button-block-in-different-colors/73110/4):
>
> [image] Applying Himaladin’s code, we can get something like this. [aria-label="Rezultati"]{ background-color: red; } [aria-label="Rezultati"] \> div{ color: white; } [aria-label="Rezultati"] svg { fill: white; } [aria-label="Raspored"]{ background-color: gold; } [aria-label="Raspored"] \> div{ color: black; } [aria-label="Rezultati"] svg { fill: black; } [aria-label="Preostali"]{ background-color: green; } [aria-label="Preostali"] \> div{ color: white; } [aria-label="Preostali"] svg { fi…

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [May 7, 2024, 1:54pm UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/17 "2024-05-07T13:54:40Z")

</div>

Got it…works now. I’m still doing some fine tunning. Thanks guys

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 13, 2024, 8:58pm UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/18 "2024-05-13T20:58:42Z")

</div>

I created a few variations based on my app theme.  
If we select container Accent \> none and use the radial gradient on the button, we kind of _ **highlight all** _ for ourselves. I used [https://mycolor.space/](https://mycolor.space/) to pick my colors.  
Hope this helps someone!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/9/99bf3bedc42086205c63b211f73e6a6420b7dbdd.png)

```auto
/* Button gradient */
.gradient button {
background: linear-gradient(45deg, #370808 0%, #B80F0F 25%, #F8AEAE 50%, #D84545 65%, #B80F0F 75%, #370808 97%);
padding-top: 12px;
padding-bottom: 12px;
border-radius: 30px;
}

/* Button gradient Zero deg */
.Zgradient button {
background: linear-gradient(0deg, #370808 0%,#A61919 10%, #B80F0F 15%, #F8AEAE 45%, #F8AEAE 55%, #D84545 65%, #B80F0F 85%, #A61919 90%, #D84545 100%);
padding-top: 12px;
padding-bottom: 12px;
border-radius: 30px;
}

/* Button gradient Radial */
.Rgradient button {
background: radial-gradient(circle,#F8F4F4 3%, #FBE9E9 10%,#F6C6C6 13%,#F8AEAE 16%,#B80F0F 45%, #B80F0F 55%,#B80F0F 70%,#A61919 80%,#B80F0F 85%, #F8AEAE 95%,#F8F4F4 3%);
padding-top: 12px;
padding-bottom: 12px;
border-radius: 30px;
}

/* Button gradient Complex */
.Cgradient button {
background: linear-gradient(45deg, #370808 0%, #B80F0F 15%, #F8AEAE 30%, #D84545 40%, #B80F0F 50%, #D84545 55%,#D84545 59%,#F8AEAE 65.5%,#F6C6C6 67%, #D84545 75%, #971A1A 85%, #B80F0F 95%, #370808 99%);
padding-top: 12px;
padding-bottom: 12px;
border-radius: 30px;
}

```

\*Edit:  
These were customized after experimenting on this: [CSS Library](https://css-library.glide.page/dl/library/s/8836b3/r/Q83uJAITSfSrn4K4Zw.vlA)

---

<div class="post-metadata">

**Author:** ![Carbonsquare](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carbonsquare/32/55224_2.png) [@Carbonsquare](https://community.glideapps.com/u/Carbonsquare)\
**Post date:** [May 13, 2024, 9:18pm UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/19 "2024-05-13T21:18:07Z")

</div>

Thanks Sekayi.

We are attempting to “No Code” in Glide as much as possible in our case since we replicate the app and configure it for each client instance. Would rather our version of “Highlight All” just pick up the native color selection in the overall app settings instead of needing to update more code in various places.

So, we will keep on hoping that Glide spends a little more time on the little UI design elements of some of their basic components like buttons, etc. If they could offer it in the Legacy apps, I don’t see why they could not bring it forward into the new app platform. But thank you for your solution. It may perhaps help others. 😄

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 13, 2024, 9:37pm UTC](https://community.glideapps.com/t/button-block-in-different-colors/73110/20 "2024-05-13T21:37:08Z")

</div>

yes, I agree. It would be better to have more options on the native components in the new app versions.