Adding a fav icon in a button using only CSS - css

Question

https://codepen.io/danielworton/pen/ZZLEMO
Hello, I'm trying to re-create the button in the codepen linked above and I have an issue adding the stars without changing the script. Also the different colored double border ~ If anyone has any clue to a solution it would be very welcome!
#My solution is as follows:
a {
border: solid 3px #212121;
border-radius: 12px;
background-image: linear-gradient(0deg,#D3D3D3 0%,#D3D3D3 50%,#e8e8e8 51%);
color: #212121;
padding: 20px;
text-align: center;
text-decoration:none;
text-transform: uppercase;
font-family: "Lucida Console", Courier, monospace;
font-size: 18px;
width: 180px;
height: 14px;
display: inline-block;
margin: auto;
}

Answer 1

You can use pseudo elements to add more elements:
a {
border: solid 2px #555;
border-radius: 12px;
background-image: linear-gradient(0deg, #D3D3D3 0%, #D3D3D3 50%, #e8e8e8 51%);
color: #555;
padding: 20px 20px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: "Arial";
font-size: 18px;
width: 180px;
height: 14px;
display: inline-block;
margin: auto;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-shadow: 1px 1px 1px white;
font-weight: 600;
box-shadow: 0 0 0 6px #D3D3D3, 0 0 0 8px #555;
}
a:after, a:before {
content: '★';
position: absolute;
width: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
height: 100%;
padding: 0 20px;
box-sizing: border-box;
font-size: 24px;
line-height: 24px;
}
a:before {
justify-content: flex-end;
}
<a href="#">
Checkout
</a>
Although, the amount of borders on that button is kind of ridiculous to expect from one element I think.
Edit: you can add multiple borders with boxshadows