CSS Buttons: width and height tags don't work

[MurderItachi]

Hello Guys,

I'm working on a website for my aunt, due to the new privacy law, she needs to update the page with a new Button in the menu. I lost the programm which I created the old .png buttons, so I can't create the new one in the same style. I want to replace the old buttons with new ones, written in css. The only problem is the size of the buttons, they keep scaling with the writting in the button, but I want them all the same size. I attached the code of the css and html, can you help me? I know, the website is written in an old style, her former programmer did all the writting and I overtook the project a while ago.

CSS.css

Schwarzwaldverein Ortsgruppe Achern.html

[Ingolme]

Add "display:block" to the .button class. Remove all width, height, min-width and min-height properties from the .button class. Remove the <br> elements from between the list items.

[MurderItachi]

Ok, I did that, but now it looks pretty awful. The buttons should be around 160px/40px to fit in the site, now they are way to small. I don't get it, why won't this tags work? I'm using chrome(new version), it shouln't be a browser issue...

CSS.css

Schwarzwaldverein Ortsgruppe Achern.html

[Ingolme]

You have a syntax error in your CSS. Your lines must be separated by a semi-colon. I suggest you move all CSS to the external file and remove the <style> tags from the document.

I've attached a working solution.

CSS.css

SchwarzwaldvereinOrtsgruppeAchern.html

[MurderItachi]

Thank you very much:)

[webtrickshome]

The best option to give equal width to your buttons is to give the width itself in pixel value with text-align center property. You can add little padding on each side for vertical spacing.

.your-button{

      width: 100px;

     text-align: center;

     padding: 5px 10px;

}

You can also add hover effects to make them look more appealing.