<style>
ul.sayfalama {
    display:flex;
    }
ul.sayfalama > li {
    list-style-type:none;
    margin-right:4px;
    }
ul.sayfalama > li > a {
    display:flex;
    padding:4px 12px;
    border-radius:12px;
    background-color:rgba(23,149,255,1);
    color:#FFF;
    font-weight:600;
    text-decoration:none;
    transition:all .3s;
    }    
ul.sayfalama > li:hover > a {
    background-color:rgba(23,149,255,.8);
    }
</style>
<ul class="sayfalama">
    <li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>