htmlcssbuttonheightwidth
CSS: Why won't these buttons take the fixed width and height I set?
I'm trying to make these buttons a fixed size. Which is width 42px and height 25px. For some reason, they aren't the correct size. Just the standard one. I've looked for solutions but couldn't find one sadly. Sorry if my code is a bit messy, I'm a beginner and trying to make something work :)
Here is the HTML and CSS code
<!DOCTYPE html>
<html>
<head>
<title>Super epic game</title>
<link rel="stylesheet" type="text/css" href="mainstyles.css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="https://fonts.googleapis.com/css?family=Lato:300&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=0.45">
</head>
<body>
<div class="container">
<div id="speelkader"> <canvas id="canvas" style="background-color: black;"></canvas></div>
<div id="attributen">
<button id="rood" class="color-changer" data-color="red">Rood</button>
<button id="groen" class="color-changer" data-color="green">Groen</button>
<button id="blauw" class="color-changer" data-color="blue">Blauw</button>
<button id="paars" class="color-changer" data-color="purple">Paars</button>
<button id="oranje" class="color-changer" data-color="orange">Oranje</button>
<button id="geel" class="color-changer" data-color="yellow">Geel</button>
<button id="wit" class="color-changer" data-color="white">Wit</button>
<button id="gum" class="color-changer" data-color="black">Gum</button>
<input type="button" id="reset" value="Reset tekening" onClick="window.location.reload()">
<div id="clear"></div>
</div>
</div>
<p id="center">Hallo! Gebruik de WASD toetsen om te bewegen :)</p>
<script src="gameJS.js"></script>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
}
.container{
width: 1359px;
margin: auto;
}
#speelkader{
margin-top: 20px;
background-color: transparent;
float: left;
padding-right: 10px;
}
#attributen{
margin-top: 20px;
background-color: gray;
width: 500px;
height: 800px;
float: left;
}
#clear {
clear: both;
}
canvas{
background-color: black;
height: 800px;
width: 800px;
}
#groen{
background-color: green;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#groen:hover{
background-color:darkgreen;
color: white;
transform: scale(1.15);
}
#rood{
background-color: red;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#rood:hover{
background-color:darkred;
color: white;
transform: scale(1.15);
}
#blauw{
background-color: blue;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#blauw:hover{
background-color:darkblue;
color: white;
transform: scale(1.15);
}
#paars{
background-color: purple;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#paars:hover{
background-color:rgb(92, 0, 92);
color: white;
transform: scale(1.15);
}
#oranje{
background-color: orange;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#oranje:hover{
background-color:darkorange;
color: white;
transform: scale(1.15);
}
#geel{
background-color: yellow;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#geel:hover{
background-color:rgb(233, 233, 0);
color: white;
transform: scale(1.15);
}
#wit{
background-color: white;
color: black;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#wit:hover{
background-color: whitesmoke;
color: black;
transform: scale(1.15);
}
#gum{
background-color: gray;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#gum:hover{
background-color: darkgray;
color: white;
transform: scale(1.15);
}
#reset{
background-color: darkred;
color: white;
width: 42px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
font-family: Lato;
border-color: black;
border-style: solid;
margin: 10px 10px 10px 10px;
}
#reset:hover{
background-color: rgb(114, 0, 0);
color: white;
transform: scale(1.15);
}
Solution
You have used separated id in styles for width and height and removed it all used ID height and width. Use the below code and it will work equal height and width for the button.
#attributen button[class=color-changer],
#attributen input[id="reset"] {
width: 140px;
height: 35px;
}
