Menu
My idea is to add a colored border to the submit button when the user hovers it.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>But the immediately following text then becomes shifted downwards.
How can I get rid of these "Jumping" text while simultaneously having the border?
261
asked Sep 08 '16 07:09
add margin:-1px; which reduces 1px to each side. or if you need only for side you can do margin-left:-1px etc. That was the best solution for me because, in my case, I set a 1px border to the orignal element and want to get, on hover, a thicker border (3px). Using margin: -2px; indeed works.
We opened the style tag and began altering a button element in the HTML file's header. The border was then added to the button by writing it as a keyword and assigning it three properties: “10px,” the border's size; “double,” the border's shape; and “black,” the border's color.
Every border has three aspects: its width, or thickness; its style, or appearance; and its color.
To remove the CSS hover effect from a specific element, you can set the pointer-events property of the element (the hover behavior of which you want to disable) to “none”.
You need to define transparent border by default on button and change border-color on hover. Further avoid changing font-weight property on hover as well as it will also expand the width and height of button and it will jump on hover.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border: 6px solid transparent;
font-weight: 800;
border-radius: 4px;
padding: 5px 10px;
}
button:hover {
border-color: crimson;
background-color: white;
color: crimson;
}<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
