Inverted elliptical border on button with icon

Question

I have the following button with the missing border on the left side:

How can I add the missing border on the left side of the button?

This is a button with an font-awesome icon and a box-shadow. (Icon was replaced with an 'X' for this example.)

Is there an easy way to solve this issue?

.button.addcart {
    position: relative;
    padding: 0 29px 0 55px;
    font: 700 16px/40px 'Quattrocento Sans',sans-serif;
    text-decoration: none;
    color: #555;
    border-radius: 20px 0 0 20px;
    border: 2px solid #222;
    line-height: 48px!important;
    text-transform: uppercase;
    cursor: pointer;
}
.button.addcart:before {
    position: absolute;
    box-sizing: border-box;
    content: "X";
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    color: #555;
    margin: 3px 0;
    box-shadow: 0 0 0 3px #555, 0 0 0 9px #fff;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 26px;
    padding: 7px 0 0;
}

<button class="button addcart" id="add_to_cart689427" type="submit" name="addtocart" value="" title="add to cart">add to cart</button>

You can add a line with .button.addcart:after . consider , set this left -5px or -10px — Mohammad, Jan 01 '18 at 18:30
@Paulie_D i would say this is half duplication as it seems the same issue but here we don't want to achieve the layout of the image. We already have the layout and we have another challenge of adding the missing border. But i agree that the different techniques are present in the other question. — Temani Afif, Jan 01 '18 at 19:02

Temani Afif · Accepted Answer · 2018-01-01T18:51:35.227

You may try radial-gradient to create a circle as a background over the background color then you can adjust its size and position to fill the missing border:

.button.addcart {
    position: relative;
    padding: 0 20px 0 65px;
    font: 700 16px/40px 'Quattrocento Sans',sans-serif;
    text-decoration: none;
    color: #555;
    border-radius: 20px 0 0 20px;
    border: 2px solid #222;
    line-height: 48px!important;
    text-transform: uppercase;
    cursor: pointer;
    background: radial-gradient(circle at left,transparent 22%,#222 23%, #222 25%,transparent 25%) 19px 0px/131px 48px no-repeat,#ddd;
}
.button.addcart:before {
    position: absolute;
    box-sizing: border-box;
    content: "X";
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    color: #555;
    margin: 3px 0;
    box-shadow: 0 0 0 3px #555, 0 0 0 9px #fff;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 26px;
    padding: 7px 0 0;
}

<button class="button addcart" id="add_to_cart689427" type="submit" name="addtocart" value="" title="add to cart">add to cart</button>

Roko C. Buljan · Answer 2 · 2018-01-01T18:55:35.827

Basically

Add an inset box-shadow to the button
Add a third box-shadow to the circle

(+ the following changes in padding, margins etc:)

.button.addcart {
    font: 700 16px/48px 'Quattrocento Sans',sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    
    position: relative;
    overflow: hidden;
    padding-right: 28px;
    color: #555;
    border-radius: 80px 0 0 80px;
    /*border: 2px solid #222; NO, we need an inset box-shadow instead */
    border: 0;
    box-shadow: inset 0 0 0 2px #222;

}
.button.addcart:before {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    content: "\2714";
    margin-left: -3px;
    width: 43px;
    height: 43px;
    border-radius: 50%; /* 50% */
    margin-right: 28px;
    box-shadow: 0 0 0 3px #555, 0 0 0 9px #fff, 0 0 0 12px #222; /* add 3rd shadow */
    font: 18px/42px FontAwesome;
}

<button class="button addcart" id="add_to_cart689427" type="submit" name="addtocart" value="" title="add to cart"><span></span>add to cart</button>

Inverted elliptical border on button with icon

2 Answers2