How do I add a border to an clickable element without disturbing the content?

Question

Hello, I wanted to create a border for an element when it's hovered.

Example (from nsw.gov.au):

Not yet clicked.

Hovering/clicked.

However, when I tried to add that to my website using:

.btn:hover {
    border: 2px solid #022714 !important;
}

It distributed the content within it:

Extra: I would also like the border not to be directly outside an element, but to have a border 2px outside the element (I hope that make sense).

I've tried answers from StackOverflow but it does not fix my problems + create new ones.

Dhana D. · Answer 1 · 2021-08-27T03:44:27.760

0

You need to encapsulate the inner elements of that button/card, as the example below, I use div.container:

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  width: 200px;
  padding: 5px;
}

.card:hover {
  border: 2px solid #000;
  padding: 3px;
}

.container {
  padding: 15px 30px;
  background-color: yellow;
}

<div class="card">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineer</p>
  </div>
</div>

Set the hover for outer element (.card) and put the padding into it. Then just let the inner element as it used to be.

If you don't want it to have "movement", just set the border thickness and the padding for the .card:hover so if it adds up altogether, it will be the same as the padding of .card.

edited Aug 27 '21 at 03:44

answered Aug 26 '21 at 04:10

Dhana D.

1,670
3
9
33

On the snippet, it still seems to be moving. – P. Z. Aug 26 '21 at 22:14
@P.Z. Already added the math strategy for border and padding to answer. – Dhana D. Aug 27 '21 at 03:45

score 0 · Answer 2 · answered Aug 26 '21 at 04:11

Add a border in the background colour, Then change it color when :hover

row{ display:inline-flex; }
button{
  border: 4px solid green;
  background: green;
  transition: 0.5s;
  padding: 10px;
  color:white;
  border-radius: 10px;
}
button:hover{
  border: 4px solid black;
}

<div class=row>
  <button>Home</button>
  <button>About</button>
  <button>Contact</button>
</div>

A Haworth · Answer 3 · 2021-08-26T04:25:21.763

You can add a pseudo element on hovering which has absolute positioning relative to its 'button' so does not disturb other layout.

Also, it can be sized to be larger than the li element itself so you can get the gap you'd like.

Here's a simple example:

ul {
  list-style-type: none;
  background-color: lightgreen;
  display: inline-box;
  width: auto;
}

li {
  display: inline-block;
  width: auto;
  padding: 5px;
  border-radius: 5px;
  background: green;
  position: relative;
  color: white;
  margin: 15px;
  box-sizing: content-box;
}

li:hover::before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 7px;
  /* 2px more than the li element */
  border: solid black 2px;
  border-radius: 5px;
  top: -9px;
  left: -9px;
  box-sizing: content-box;
}

<ul>
  <li>HOME</li>
  <li>ARTICLES</li>
  <li>QUIZ</li>
  <li>ABOUT</li>
</ul>

score 0 · Answer 4 · answered Aug 26 '21 at 04:29

0

You can set transparent border for that element and on hover make it colored

answered Aug 26 '21 at 04:29

Gurjinder Kaur

19
2

This for some reason blocks the shadows. – P. Z. Aug 26 '21 at 22:08

GucciBananaKing99 · Answer 5 · 2021-08-27T08:32:59.403

I used display: flex; with justify-content: center; and flex-wrap: wrap; to make the elements wrap when the screen gets smaller. Then I created the boxes with invisible borders and made the borders visible when hovering over the boxes.

Here is the code:

#wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.box {
  height: 100px;
  width: 200px;
  box-shadow: 0 0 10px -2px silver;
  margin: 1em;
  padding: 1em;
  border-radius: 5px;
  color: #315A9A;
  font-family: 'Roboto', sans-serif;
  font-weight: bolder;
  border: 3px solid rgba(0,0,0,0); /* Invisible Border */
  transition: all 0.2s;
  padding: 5px;
  position: relative;
  margin: 15px;
  box-sizing: content-box;
}

.box::before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 202px;
  height: 102px;
  padding: 9px;
  border: solid rgba(0,0,0,0) 2px;
  border-radius: 5px;
  top: -7px;
  left: -7px;
  transition: ease-in-out 0.15s;
}

.box:hover::before {
  border: solid #3982AF 2px;
  cursor: pointer;
}

<div id="wrapper">
  <div class="box">2021 Covid-19 Support Package</div>
  <div class="box">2021 Covid-19 Support Package</div>
  <div class="box">2021 Covid-19 Support Package</div>
  <div class="box">2021 Covid-19 Support Package</div>
</div>

Is there any way to do the extra (I would also like the border not to be directly outside an element, but to have a border 2px outside the element)? — P. Z., Aug 26 '21 at 22:07

score 0 · Accepted Answer · answered Aug 26 '21 at 22:54

I used a combination of different answers to achieve what I want.

I add another <div> BEFORE the element div (including ones that have CSS shadow) and added margin: 2px (this is for border being 2px outside the element).

Within that div, I also added the clickables CSS class. Then I add to CSS:

.clickables {
    border: 2px solid transparent !important;
}

.clickables:hover {
    border: 2px solid #022714 !important;
}

(you might need to its own div for clickables, have this BEFORE the margin div; should there be any problems)

You don't need to have any kind of hardcoded margin/top/bottom using this.

Results:

score -1 · Answer 7 · answered Aug 26 '21 at 04:10

-1

Try adding an overflow hidden along with other properties. Refer here: https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-add-border-on-mouse-hover-without-affecting-the-surrounding-elements

answered Aug 26 '21 at 04:10

Min Yoongi

396
5
16

How do I add a border to an clickable element without disturbing the content?

7 Answers7