Customize Scrollbar button - css

Question

I am able to customize scrollbar which now looks like below
But, the scrollbar-button looks ugly. I am trying to make the buttons looking like below:
Can anyone please help?
I am using the below css for customizing the scrollbar.
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background: rgb(224, 224, 224);
}
::-webkit-scrollbar-thumb {
background: rgb(200, 200, 200);
border: 0.05em solid #eeeeee;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(180, 180, 180);
}
::-webkit-scrollbar-thumb:active {
background: rgb(117, 117, 117);
}
::-webkit-scrollbar-button {
border-style: solid;
height: 16px;
width: 16px;
}
::-webkit-scrollbar-button:vertical:decrement {
border-width: 0 7px 14px 7px;
border-color: transparent transparent rgb(117, 117, 117) transparent;
}
::-webkit-scrollbar-button:vertical:decrement:hover {
border-color: transparent transparent rgb(180, 180, 180) transparent;
}
::-webkit-scrollbar-button:vertical:increment {
border-width: 14px 7px 0 7px;
border-color: rgb(117, 117, 117) transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:increment:hover {
border-color: rgb(180, 180, 180) transparent transparent transparent;
}

Answer 1

Please try below
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 50px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.overflow
{
min-height: 400px;
}
#wrapper
{
text-align: center;
width: 500px;
margin: auto;
}
#stylescroll::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#stylescroll::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
#stylescroll::-webkit-scrollbar-thumb
{
background-color: #a6aebb;
}
<div id="wrapper">
<div class="scrollbar" id="stylescroll">
<div class="overflow"></div>
</div>
</div>

Answer 2

Scrollbar with Custom buttons(both horizontal and vertical bar).....Have a look
Have to customize these classes like:
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-radius: 5px 5px 0 0
height: 16px;
width: 16px;
background-position: center 4px;
background-image: url("data:image/svg+xml;utf8,<svg
xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(121, 255,
108)'><polygon points='50,00 0,50 100,50'/></svg>");
}