CODEWITHSUNDEEP
css
interwebjill
interwebjill

Reputation: 950

Awkward gap along border of button when using box-shadow

I am employing box-shadow in CSS to get both inner and outer glows on a circular button:

http://codepen.io/interwebjill/pen/mVbXyW

   .button-outer {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 0px 0px 25px 10px rgba(255, 255, 255, .50);
        position: absolute;
    }

    .button-inner {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: inset 0px 0px 25px 15px rgba(255, 255, 255, .45);
        position: absolute;
    }

    .card.activate {
        box-shadow: 0px 0px 25px 15px rgba(255, 255, 255, 0.75);
    }

    .button-inner.activate {
        box-shadow: inset 0px 0px 25px 15px rgba(255, 255, 255, 1);
    }

    .button-outer.activate {
        box-shadow: 0px 0px 25px 15px rgba(255, 255, 255, 1);
    }

but I am getting an awkward seam at the border. This is especially apparent if the button is toggled on. I have tried stroking the border, but that doesn't help. Does anyone know a fix for this?

BTW, this script is for a desktop app and will be fixed in Chromium through Electron. So best viewed in Chrome.

Upvotes: 1

Views: 120

Answers (1)

myf
myf

Reputation: 11323

Iʼd suggest using single element for button and applying multiple box-shadows to them: problem you described can be masked by two additional small shadows with minimal spreads and radii: http://codepen.io/myf/pen/PZYQxB?editors=010

 .button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow:
          0px 0px 25px 10px rgba(255, 255, 255, .50),
          inset 0px 0px 25px 15px rgba(255, 255, 255, .45),
          0px 0px 1px 0px rgba(255, 255, 255, .1),
          inset 0px 0px 1px 0px rgba(255, 255, 255, .1);
    }

    .button.activate {
        box-shadow:
          0px 0px 25px 15px rgba(255, 255, 255, 1),
          inset 0px 0px 25px 15px rgba(255, 255, 255, 1),
          0px 0px 0px 1px rgba(255, 255, 255, 1),
          inset 0px 0px 0px 1px rgba(255, 255, 255, 1);
    }

I think that your original problem is in graphical rendering, notably the rounding/antialising glitch introduced by border-radius. It is not present when box is rectangular.

Upvotes: 1

Related Questions