Question

I’m trying to create a button as below in HTML/CSS. What would be the best way of going about creating the white border that’s slightly inside the actually edge of the button? I’m using ASP.net.

Thanks in advance!

Answer 1

using nesting inset box-shadows you can create this:

with pure one html tag:

<button> view your receipts </button>

and some css:

button {
    width: 200px;
    font-weight: bold;
    height: 55px;
    line-height: 55px;
    border-radius: 17px;
    background-color: #ffd28a;
    border: none;
    box-shadow:
            0 0 0  9px  #ffd28a inset,
            0 0 0 11px  #FFFFFF inset;
    color: red;
    box-sizing: content-box;
}