HTML button style with 3 horizontal dots - html

Question

I am trying to create a button with 3 horizontal dots as in the attached screenshot with the below css class and unicode Character “…” (U+2026).
But when I apply background it takes more width and height, can any one please suggest.
In the attached screenshot, I need the first image but getting the second image.
.test:after {
content: '\2026';
font-size: 25px;
background-color: #D0D0D0;
}
<div class="test"></div>

Answer 1

How about this?
Placing a <div> inside the button allows us to fine tune the position of the dots.
button {
border: 2px solid #9fa2a4;
height: 18px;
border-radius: 5px;
background: linear-gradient(#fbfbfb, #d1d1d1); /* gives the "gradient */ color background"
}
.dots {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* The Arial font appears to have "square" dots */
font-size: 36px; /* The size of the dots */
line-height: 0; /* helps vertically position the dots */
margin-top: -10px; /* helps "raise" the dots higher */
letter-spacing: -2px; /* "squeezes" the dots closer together */
}
<button>
<div class="dots">...<div>
</button>

Answer 2

mostly achieved the required style with the code. Now trying to add empty background before and after 3 dots in the result image.
.horizontal-dots {
cursor: pointer;
width: 19px;
height: 14px;
background-image: radial-gradient(circle, black 1.5px, transparent 2.0px);
background-size: 6px 16px;
background-color: #EEEEEE;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-radius: 0.2em;
margin-left: 14px;
}
.horizontal-dots:hover {
border: solid .2px #0198E1;
}
<div class="horizontal-dots">
</div>