Buttons size

[tbettinazzi@axioma.it]

I need to create some small (30px) flat buttons with only an icon inside but centered.

I didn’t find any property to do that.

how can I do ?

Tks

[admin]

Please, refer to this sample with small buttons and icons: https://www.htmlelements.com/demos/button/basic/

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 weeks, 2 days ago by admin.

[tbettinazzi@axioma.it]

In that sample I see some buttons smaller than others, however I don’t see any way to control dimensions.

My need is to have button smaller than buttons shown in that example.

Also change the background color is a need.

Tks

[admin]

Hi,

The size of the buttons is set through CSS. In CSS you have width and height properties which determine the size of the Button and any other HTML Element. For example, the round button in the sample is 48px. If you set it to 30px through CSS, it will be 30px.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

I tried and I reduced the size using (cfg-button-inline is my class)
smart-button.cfg-button-inline {

height :24px;

width:25px;

}
Now I see the correct size of the button but the icon is visible only partially in the bottom right corner.

Inspecting the page I saw the internal <button> tag still have a 32×32 size.

Tks

 

• This reply was modified 2 weeks, 1 day ago by tbettinazzi@axioma.it.
• This reply was modified 2 weeks, 1 day ago by tbettinazzi@axioma.it.

[tbettinazzi@axioma.it]

Also using material icons the icon is shown only partially in the lower right corner.

What’s wrong ?

Tks

[tbettinazzi@axioma.it]

I prepared a testcase in codpen

https://codepen.io/tullio0106/pen/jOgQwrY

You’ll see the first button is not shown in the expected way.

Tks

[admin]

Hi,

You can apply to the button tag using CSS the following: display: flex; and align-items: center; if you want the Text and Image to be aligned.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Tks but it still doesn’t work

The only change is that display:flex adds also a harmful new line.

I updated the testcase.

Tks

[Author]

Posts