HTML Too noob to fix BOOTSTRAP button text and border size

[suha04]

Hello guys!

I've started programming a new project that I have to finish before Tuesday, and since I only have about 1 year expertise in basic coding, I tend to fail, and I need a little help. 

Here's the problem,: I'd like to make a front page to my site, with BOOTSTRAP buttons, and I'd like to fix their size on the page, so they can't be manipulated with Zooming-in or out. I managed to fix everything on the page so far, using percentage-sizes, but at the buttons, I can only fix the box, the border and the font size can be manipulated. I know that the border can't be sized with percentages, but I have no idea how to change them. Please, would someone help me out?

 

Here's the HTML code for one of them:

 

<button type="button" class="Buttons" class="Buttontext" id="Button1">Placeholder</button>

 

CSS:

 

.Buttons

{

display: block;

position: Fixed;

margin-top: 0.4%;

border-radius: 0px 0px 0px 0px;

background-color: black;

color: white;

font-size: 200%;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

border-color: rgb(184, 8, 90);

border-width: 3px;

height:6%;

width:13%;

}

 

.Buttontext

{

    font-size: 30px;

    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

 

#Placeholder

{

    left: 27%;

}

 

Thanks!

[superfunky]

1.Just use border: 3px solid violet;

where 3px is the border-width

solid is border type

violet is color (can be a hex code , RGB , HSL etc)

 

2. If I am not wrong using percentage-size is really bad.

did you checked how your site looks in other devices.(ik bootstrap is responsive and all but if you hardcoded percentage sizes it won't be responsive)

 

3. small tips

- use lower case while naming classes

- you can group class name

class = "class1 class2" like this

- default border radius is 0px no need to specify it.

- STOP USING PERCENTAGE VALUES