all parent elements moving when i hover the cursor on the child element

Question

I have parent div and four child divs. the parent element is a container and child elements are buttons. I set the CSS property of the button to increase its border-width when I hover on it. the actual problem is whenever the button increases its border-width; the entire webpage moving. how can I make the webpage stable?

 #theme-options-wrapper { display: flex; justify-content: center; }.theme-button { height: 30px; width: 30px; border-radius: 50%; background-color: black; margin: 5px; cursor: pointer; border: 2px solid #000000; -webkit-box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69); -moz-box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69); box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69); }.theme-button:hover { border-width: 5px; } #light-mode { background-color: #ffff; } #blue-mode { background-color: #192734; } #green-mode { background-color: #78866b; } #purple-mode { background-color: #7e4c74; }

 <div id="theme-options-wrapper"> <div data-mode="light" id="light-mode" class="theme-button"></div> <div data-mode="green" id="green-mode" class="theme-button"></div> <div data-mode="purple" id="purple-mode" class="theme-button"></div> <div data-mode="blue" id="blue-mode" class="theme-button"></div> </div>

here the page URL link https://nanthu0123.github.io/portfolio/

image of buttons (child elements) buttons-img

here the source code https://github.com/nanthu0123/portfolio

Answer 1

hey , add box-sizing: border-box; property to your .theme-button class.

UPDATE:

also if you want make your button larger add transform: scale(1.3); to your pseudo class ( .theme-button:hover )

Answer 2

One option is to simply not use the border to draw the border, instead use the box-shadow property, which can take a comma-separated list of box-shadow definitions; below I've added a 2-pixel 'fake border' after the definition of the original box-shadow :

box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;

And, within the :hover pseudo-class expanded that 2-pixel size to 5-pixels:

box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;

As the box-shadow doesn't take space in the document it won't force elements to reflow (though obviously a repaint is required to show the changed shadow).

 #theme-options-wrapper { display: flex; justify-content: center; }.theme-button { height: 30px; width: 30px; border-radius: 50%; background-color: black; margin: 5px; cursor: pointer; box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000; }.theme-button:hover { box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000; } #light-mode { background-color: #ffff; } #blue-mode { background-color: #192734; } #green-mode { background-color: #78866b; } #purple-mode { background-color: #7e4c74; }

 <div id="theme-options-wrapper"> <div data-mode="light" id="light-mode" class="theme-button"></div> <div data-mode="green" id="green-mode" class="theme-button"></div> <div data-mode="purple" id="purple-mode" class="theme-button"></div> <div data-mode="blue" id="blue-mode" class="theme-button"></div> </div>

This can also be transitioned/animated – the colour, length or both – if required, with a single line:

transition: box-shadow 0.2s linear;

 #theme-options-wrapper { display: flex; justify-content: center; }.theme-button { height: 30px; width: 30px; border-radius: 50%; background-color: black; margin: 5px; cursor: pointer; box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000; transition: box-shadow 0.2s linear; }.theme-button:hover { box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000; } #light-mode { background-color: #ffff; } #blue-mode { background-color: #192734; } #green-mode { background-color: #78866b; } #purple-mode { background-color: #7e4c74; }

 <div id="theme-options-wrapper"> <div data-mode="light" id="light-mode" class="theme-button"></div> <div data-mode="green" id="green-mode" class="theme-button"></div> <div data-mode="purple" id="purple-mode" class="theme-button"></div> <div data-mode="blue" id="blue-mode" class="theme-button"></div> </div>

Reference:

• box-shadow .
• transition .