CODEWITHSUNDEEP
csssass
Bodokh
Bodokh

Reputation: 1066

How to remove unwanted gap between the border and the element

I have the following pen:

http://codepen.io/Bodokh/pen/EZKxjE

And I have some cool buttons I made. Now the problem is that when the button is active and scales down just a little, a strange white gap appears between the button border and background color that zoomed in.

on the left of the following image is the button at its normal state, in the middle button that is focused, hovered and active, and on the far right a focused and hovered button.

my buttons

As you can see when the button is active a strange white gap appears, I tried the following to correct the problem without success

on the pseudo element that zooms the background color:

transform:scale(1.1);

And on the parent element:

overflow:hidden;

But that didn't help since overflow only hides the content overflowing the padding and not the border.

So the question is what's way to workaround this?

Button's HTML:

<button class="zoombtn">
    <span>GREY<span>
</button>

Button's source code in SCSS:

.zoombtn{
    -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
    font-family:'Roboto','Open Sans Hebrew','Arial',sans-serif;
    margin:6px;
    cursor:pointer;
    font-size:32px;
    padding:24px;
    border:0;
    background:rgba(0,0,0,.07);
    position:relative;
    outline:0;
    border-width:6px;
    border-style:solid;
    border-color:#BDBDBD;       
    transition:all .25s;
    overflow:hidden;
    span{
        position:relative;
        color:#424242;
        transition:all .25s cubic-bezier(.55,0,.1,1);
    }
    &:before{
        content:' ';
        display:block;
        position:absolute;
        top:0;left:0;right:0;bottom:0;
        background:#9E9E9E;
        transform:scale(0);
        transition:all .25s cubic-bezier(.55,0,.1,1);
    }
    &:hover,&:focus{
        border-color:#9E9E9E;
                box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        span{
            color:#fff;
            text-shadow:0 0 5px #555;
        }
        &:before{
            transform:scale(1.1);
        }
    }
    &:active{
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        transform:scale(.97);
        border-color:#757575;
        span{
            text-shadow:0 2px 8px #333;
        }
        &:before{
            background:#757575;
        }
    }
}

Upvotes: 1

Views: 2097

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105903

It looks like :

transform:scale(.97) could be turned to transform: perspective(500px) translate3d(0px,0px,-10px); for .zoombtn:active (&:active).

fork of your pen fixed

Upvotes: 0

Serg Chernata
Serg Chernata

Reputation: 12400

It's just a clipping issue associated with overflow:hidden on the button element. You don't really need it, just delete that line and the artifact will disappear.

Upvotes: 0

Bodokh
Bodokh

Reputation: 1066

I found a very simple answer to my own question. By simply adding the following line to the active state of the button:

.zoombtn:active{
    background:{background_of_button}
}

And that basically solves the problem because the white gap becomes a colored gap.

The gap is still there but just the same color as the button so it isn't noticeable at all.

Upvotes: 2

Related Questions