Use css only to accomplish this button layout - css

Question

at first I thought it was easy, until I tried...
is there some god of css can help me lol
but there is a premise, use css only and one html tag, no special character like &#9733
I finished the outside, But I got one tsudo content only, how to set two stars and one word into that or optimize that(not a real button, just look like it will be fine, thaaaaaaaaaaanks for any help or any thought)
i post what I did so far, and sorry for described it unclearly, It look like a button, not a lol.
#foo::after {
content: "";
position: absolute;
height: 31px;
width: 101px;
border: 1px solid rgb(90, 90, 90);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
box-shadow: 1px 1px 1px lightgrey;
}
#foo::before {
content: "";
color: rgb(78, 78, 78);
font-weight: bold;
font-size: 10px;
position: absolute;
height: 24px;
width: 93px;
border: 1px solid rgb(161, 161, 161);
/* box-shadow: 1px 1px rgb(134, 134, 134); */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 6px;
background: linear-gradient(rgb(230, 228, 228) 53%, rgb(199, 199, 199) 55%);
}
#foo {
position: relative;
height: 30px;
width: 100px;
border: 1px solid white;
border-radius: 8px;
background: rgb(209, 206, 206);
}
<div id="foo"></div>

Answer 1

Use before or after pseudo selector to add text. Use CSS Entities or HTML Symbols to add stars.
Use multiple box-shadows to add multiple border styles
body {
padding: 25px;
}
#foo:before {
content: "★ CHECKOUT ★";
}
#foo {
display: inline-block;
position: relative;
padding: 15px 20px;
border-radius: 8px;
font-weight:bold;
font-family:sans-serif;
background: linear-gradient(rgb(230, 228, 228) 53%, rgb(199, 199, 199) 55%);
box-shadow: 0 1px 2px 2px #0000001a, 0 0 0 8px #cbcbcb, 0 0 0 10px white, 0 0 0 12px #7d7d7d;
}
<div id="foo"></div>

Answer 2

Here is my idea where I build the start using background (https://dev.to/afif/background-pattern-star-shape-194m)
body {
padding: 25px;
}
#foo:before {
content: "CHECKOUT";
display:block;
padding:20px 50px;
--s: 40px; /* size */
--m: 113px; /* space */
--v1:transparent,#fff 0.5deg 108deg,transparent 109deg;
--v2:transparent,#888888 0.5deg 36deg,transparent 37deg;
background:
conic-gradient(from 54deg at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--v1)),
conic-gradient(from 126deg at calc(var(--s)*0.5) calc(var(--s)*0.7) ,var(--v1)),
conic-gradient(from 162deg at calc(var(--s)*0.5) 0 ,var(--v2)),
conic-gradient(from 90deg at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--v2));
background-size: calc(var(--s) + var(--m)) calc(var(--s) + var(--m));
mix-blend-mode: darken;
background-position: 0 9px;
}
#foo {
display: inline-block;
position:relative;
padding: 5px 10px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background: linear-gradient(rgb(230, 228, 228) 53%, rgb(199, 199, 199) 55%);
box-shadow: 0 1px 2px 2px #0000001a, 0 0 0 8px #cbcbcb, 0 0 0 10px white, 0 0 0 12px #7d7d7d;
}
<div id="foo"></div>