0

OBJECTIVE

I want my button to go from a black background to a white background with a black border on hover.

INITIAL PROBLEM

Upon adding the border to the "a" element, the text within it moves. I found a few solutions, including from SO itself, such as this one and so I added an invisible border to the non-hover state.

NEW PROBLEM

I can't seem to find a way to move the text to compensate for the border.

INFORMATION

My site is still on localhost so, unfortunately, I can't share a link. However, this is the demo of the theme I'm using:

https://shoptimizerdemo.commercegurus.com/product-category/women/

The button is the "Add to cart" one.

Please forgive me, I'm a noob and don't know if it would be helpful to share any specific code or anything other than the link above but, if so, please let me know and I'll edit the post to include it.

EDIT

Margin-top works on this page but also raises the text: https://shoptimizerdemo.commercegurus.com/product/knitted-top/

It doesn't work elsewhere such as on the main page's products: https://shoptimizerdemo.commercegurus.com/

(the green "Add to cart" button)

José Guedes
  • 359
  • 3
  • 13
  • What do you mean by; I can't seem to find a way to move the text to compensate for the border ?? because when adding a transparent border everything should stay the same – ninadepina Dec 25 '22 at 20:55
  • Hi! Thanks so much for replying. I added a black border intending the text to actually move so that I could then compensate by using "margin-top". This way the text would be pre-moved in the non-hover state and wouldn't jump arond. – José Guedes Dec 25 '22 at 21:34
  • and now `margin-top` isn't working? – ninadepina Dec 25 '22 at 21:37
  • Exactly, no idea why. I'm a noob – José Guedes Dec 25 '22 at 21:48
  • Could you try `box-sizing: border-box` on your element instead of trying an invisible border when not hovered? This attribute will include padding and borders in the overall dimensions of the button – Spencer May Dec 26 '22 at 00:31
  • Thank you very much for the suggestion! Unfortunately the text still moved once the border was applied on hover, even using when "!important" – José Guedes Dec 26 '22 at 01:14

1 Answers1

0

Does this work for you? Copied the button and the rules for .button from the site you pointed to. Then just added the two rules for .button:hover.

Update per @Python Millionaire's comment. Added rules display: flex; align-items: center; justify-content: center; to .button. To make the aligning more visible, increased the height of the button.

.button {
  background-clip: border-box;
  background-color: rgb(59, 181, 74);
  border-radius: 4px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  height: 80px;
  line-height: 40px;
  margin-bottom: 3.304px;
  text-align: center;
  width: 276.133px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}
.button:hover {
  border: 1px solid black;
  margin: -1px;
}
<a href="#" class="button">Add to cart</a>
burkay
  • 1,075
  • 1
  • 10
  • 20