I changed .Block:hover to use vh (veiwport height) as shown here:
.Block:hover {
width: 34%;
height: 90vh;
}
.Block {
display: inline-block;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 90%;
background-color: yellow;
color: black;
}
.Block:hover {
width: 34%;
height: 90vh;
}<button onclick="location.href='https://website.com'" class="Block">Website</button>Height in percentage value is tricky. You’re currently asking the button to take up 90% of the parent element’s height on hover. If there is not a fixed height set on the parent (i.e. it is set to auto which is default), then you can’t expect the height declaration to know what to take 90% of.
If you give the parent element a fixed height, then the button can grow in height based on the percentage of that height. Down below I added height: 100px to the parent element, and it now responds on hover
.Block {
display: inline-block;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 90%;
height: auto;
background-color: yellow;
color: black;
}
.Block:hover {
display: inline-block;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 34%;
height: 90%;
background-color: yellow;
color: black;
}
div {
height: 100px;
}<div>
<button onclick="location.href='https://website.com'" class="Block">Website</button>
</div>As a word about nomenclature, “responsive” usually refers to the layout changing with viewport size, not about user interaction with the page. Confusing, I know.
So I’ve been trying to make a responsive button and i managed to make width but not height here’s my html:
.Block {
display: inline-block;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 90%;
height: auto;
background-color: yellow;
color: black;
}
.Block:hover {
display: inline-block;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 34%;
height: 90%;
background-color: yellow;
color: black;
}<button onclick="location.href='https://website.com'" class="Block">Website</button>and it’s not responsive with height