Help: CSS of my calculator

Hi! have some cuestion about this:

-How can i create a gap among the buttons?
-How can i make the calculator buttons flows with the gradient color?<<<
-How can i “center more” the content of the buttons (numbers/symbols).
-It’s more prefesional make a grid in this case?

Thanks in advance!.

CODEPEN: https://codepen.io/ricardonothing/pen/abzOLBx

1 Like

It is ‘fully transparent’ - it just doesn’t look like it because of the background effect you have - if you change your background colour to a solid colour you will see it will disappear (although not sure why you want to do that).
A grid could work nicely… then you can use “grid-gap” (or row-gap and column-gap if you wanted row and column gaps to be different) to get your spacing.

1 Like

Ok, i will try with a Grid. But, i want a background like that, with a gradient. But i don’t know how to fix buttons’colors.

1 Like

For centering content of the buttons vertically you need add “vertical-align: middle;” to .button class.

Great help for centering there: https://css-tricks.com/centering-css-complete-guide/

1 Like

Have a look at where you are setting the background color ( * means you are applying it to every element in your html)
The only reason you can see the buttons is because you are using a gradient, because you have the page background set as a gradient from dark to light blue (so each button is going from dark to light blue), but the area button area is smaller, so you can see them against the background of the page.
Hope this helps :slight_smile:

1 Like

You are using a table,
therefore you can search for html table gap between cells

But I would switch to a grid and use grid-gap.

1 Like

Thanks! it works. Easy, but i don’t know why doesn’t work when i was trying, lol. Yeah, i will change it to a grid as soon as posible.

Thanks a lot! it works nice. Thanks for teaching me, i will learn that page.

Thanks for your answer, thanks to you i already know why its looks like that but also i don’t have any idea how to do a nice design or fix that gradient IN the Button. Practicly, i dont know what to do right know with code or design hahahaa :frowning:

Mira aquí (https://codepen.io/sgedye/pen/GRgJbGG?editors=1100), cambié la SCSS un poco pero ahora espero que pueda ver lo que estaba diciendo sobre el asterisco :slight_smile:

1 Like

Ya, comprendo. Muchisimas gracias! (:

1 Like