Circle around div when hover

Question

I have a sun shape div. I just want to show a border when hover it with transparent gap between hover border and object.

First I tried with box shadow but cant make white gap. It requires solid color, then I tried with this way. But the gap is not appearing.

Here is my code.

    .sun-quote-pages{
      border-radius: 50%;
        background-color: #f4953b;
        width: 4.1em;
        height: 4.1em;
        border: 2px solid transparent;
        transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
    }
    
    .sun-quote-pages:hover {
         transform: scale(1.3);
        border: 2px solid #f4953b;
        margin: 2px;
        padding: 2px; 
    }
    
    
    .wrapper{
      margin-left:150px;
      margin-top:50px;
    }

    <div class="wrapper">
      <div class="sun-quote-pages">   
      </div> 
    </div>

What am I missing here?

Jsfiddle

Answer 1

The solution is 'background-clip' found here:

https://css-tricks.com/transparent-borders-with-background-clip/

With it you can prevent the background color from flowing under the border and padding. It is widely supported:

https://caniuse.com/#search=background-clip

so your CSS would become:

.sun-quote-pages{
  border-radius: 50%;
    background-color: #f4953b;
    width: 4.1em;
    height: 4.1em;
    padding: 2px; 
    border: 2px solid transparent;
    background-clip: content-box;
    transition: transform 0.5s ease, border 0.5s ease;
}

.sun-quote-pages:hover {
    border: 2px solid #f4953b;
    transform: scale(1.3);
}


.wrapper{
  margin-left:150px;
  margin-top:50px;
}

See: https://jsfiddle.net/auzjv4rp/11

Or why not have a double border?

See: https://jsfiddle.net/auzjv4rp/13

Answer 2

.sun-quote-pages:hover {
         transform: scale(1.3);
       
    }
	.sun-quote-pages:hover::after {
        border: 2px solid #f4953b;
       
    }
	
	.sun-quote-pages{
	width: 4.1em;
	height: 4.1em;
	margin: 20px auto;
	border-style: ridge;
	border: 2px solid transparent;
	border-spacing:10px;
	border-radius: 50%;
	position:relative;
	background-color: #f4953b;
	transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
	}
	.sun-quote-pages:after {
	  content: '';
	  position: absolute;
	  top: -10px;
	  left: -10px;
	  right: -10px;
	  bottom: -10px;
	  border: 2px solid transparent;
	  border-radius: 50%;
	  }

    
    
    .wrapper{
      margin-left:150px;
      margin-top:50px;
    }

 <div class="wrapper">
      <div class="sun-quote-pages">   
      </div> 
    </div>
	<style>

Try This..