# Change button color in pages

**URL:** <https://community.glideapps.com/t/change-button-color-in-pages/57212>\
**Category:** Ask for Help\
**Created:** [January 28, 2023, 12:24pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212 "2023-01-28T12:24:14Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [January 28, 2023, 12:24pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/1 "2023-01-28T12:24:14Z")

</div>

If I use background color on the CSS class of the button block it changes this way  
How do I change the color of the buttons themselves?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/7/37ee418a288f037c5ed81cd83630aa63aede176a.jpeg)

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [January 28, 2023, 12:32pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/3 "2023-01-28T12:32:31Z")

</div>

This Doesn’t exist in button block.  
I need it in a container with a background image so I cant use a new container for single buttons.

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [January 28, 2023, 1:47pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/4 "2023-01-28T13:47:10Z")

</div>

@Darren_Murphy  
Can you please tell me if i’m missing anything simple here?

---

<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:** [January 28, 2023, 2:32pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/5 "2023-01-28T14:32:43Z")

</div>

Sorry, I’m not the best person to ask about this.

I think @Robert_Petitto has done a bit with CSS in Pages, so he might be able to help.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 28, 2023, 4:09pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/6 "2023-01-28T16:09:30Z")

</div>

To do CSS in pages, you have to be on a business plan, or you can create your own buttons using HTML.

![c70f66fbf0bdc6b2b9aba62aebd4fded0b886f0f_2_650x500.jpeg](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/d/1d804c41c546951c60a7b8500485979a67344be7.jpeg)

> **[External Data Source](https://external-data-1.glide.page/)**
>
> Multi Spreadsheets Data source for Glide Pages with Stripe and PayPal integrations, Address Picker, Custom Emails, PDF Invoice Creator. Unlimited rows and updates.

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [January 28, 2023, 4:34pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/7 "2023-01-28T16:34:24Z")

</div>

I am on the business plan. its just odd that I can choose colors in the regular button component but not in block buttons.  
would like to get help with the CSS

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [January 28, 2023, 5:56pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/8 "2023-01-28T17:56:49Z")

</div>

Try to use Rich text component with action  
Inside four split container

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/3/637ec616fb68750ba583e033508f3020b41de2d1.jpeg)

div style=“display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;”\>  
div style=“padding: 12px 16px 40px 16px; border-radius: 12px; background: skyblue; color: white;”\>  
div style=“font-size: .875rem; opacity: .7; margin-bottom: 6px;”\>Назначен  
div style=“font-size: 1.6rem;”\>275  
/div\>

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [January 28, 2023, 6:18pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/9 "2023-01-28T18:18:27Z")

</div>

Can I please have the CSS code for copy?

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [January 28, 2023, 6:28pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/10 "2023-01-28T18:28:46Z")

</div>

\<  
div style=“display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;”\>  
div style=“padding: 12px 16px 40px 16px; border-radius: 12px; background: skyblue; color: white;”\>  
div style=“font-size: .875rem; opacity: .7; margin-bottom: 6px;”\>Назначен  
div style=“font-size: 1.6rem;”\>275  
/div\>

---

<div class="post-metadata">

**Author:** ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)\
**Post date:** [January 29, 2023, 8:05pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/11 "2023-01-29T20:05:23Z")

</div>

Actually you don’t need the grid wrapper if you place those divs inside a Container component. You just need a «button» itself.

`<div style="padding: 1rem; background-color: white; color: black;">Button</div>`

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [January 29, 2023, 8:09pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/12 "2023-01-29T20:09:59Z")

</div>

Игорь, у Вас новый ник в этом чате!  
Спасибо за кнопки!

---

<div class="post-metadata">

**Author:** ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)\
**Post date:** [January 29, 2023, 8:10pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/13 "2023-01-29T20:10:27Z")

</div>

Oops) Forgot about  
border-radius: .75rem; text-align: center;

---

<div class="post-metadata">

**Author:** ![11183](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11183/32/29797_2.png) [@11183](https://community.glideapps.com/u/11183)\
**Post date:** [January 29, 2023, 8:11pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/14 "2023-01-29T20:11:14Z")

</div>

В этом чате всегда такой был) Это после автоматической регистрации через гугл, поменять никак нельзя)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 29, 2023, 9:39pm UTC](https://community.glideapps.com/t/change-button-color-in-pages/57212/15 "2023-01-29T21:39:33Z")

</div>

or you can make it pretty 😉

 ![Screen Shot 2023-01-29 at 4.38.02 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/2/d20c3ec266fdb359937a725c4e84dc6a33abdce8.jpeg)

```auto
<div style="
padding: .8rem; background-color: red; color:white;
border-radius: .75rem; text-align: center;
box-shadow: 1px 1px 9px grey;
width:70%;
margin-left:auto;
margin-right:auto;
">
<b>Button 1</b>
</div>

```