Hi, has anyone developed block button in different colors?
Like this, but button has different color including icon color
Thanks
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.
Customize “BtnName” with your own button name.
[aria-label="BtnName"]{
background-color: rgba(0, 255, 0, 0.1);
}
[aria-label="BtnName"] > div{
color: red;
}
[aria-label="BtnName"] svg {
fill: green;
}
3 Likes
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 {
fill: white;
}
[aria-label="OdloĹľenĂ"]{
background-color: darkblue;
}
[aria-label="OdloĹľenĂ"] > div{
color: white;
}
[aria-label="OdloĹľenĂ"] svg {
fill: white;
}
3 Likes
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…
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?
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. 
2 Likes
Does this work on the maker plan as well?
There should be no difference in CSS for different plans.
2 Likes
All newest paid plans should have access to it.
1 Like
ok, thanks! now I just have to learn to use CSS. 
2 Likes
You have the library to help if you need anything.
1 Like
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.
Fantastic. Thanks!!!
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.
definitely no change as I pasted the code. Included css preview…
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?
1 Like
Got it…works now. I’m still doing some fine tunning. Thanks guys
2 Likes
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/ to pick my colors.
Hope this helps someone!
/* 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
1 Like
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. 
2 Likes
yes, I agree. It would be better to have more options on the native components in the new app versions.