Change button color in pages

Ask for Help
1

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
image1905×770 122 KB

3

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.

4

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

5

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.

1 Like
6

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

7

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

8

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

image
image1918×852 163 KB

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>

2 Likes
9

Can I please have the CSS code for copy?

10

<
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>

1 Like
11

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>

3 Likes
12

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

1 Like
13

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

14

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

15

or you can make it pretty :wink:

Screen Shot 2023-01-29 at 4.38.02 PM
Screen Shot 2023-01-29 at 4.38.02 PM2628×1724 145 KB 

<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>
4 Likes