html
                 <div id="top-nav">
    <div>
        <button id="btn-start-free">شروع رایگان</button>
        <button id="btn-login">ورود</button>
    </div>
    <ul>
        <li><a href="#">مقالات</a></li>
        <li><a href="#">تعرفه</a></li>
        <li><a href="#">سوالات متداول</a></li>
    </ul>
    <img src="https://digibarbari.ir/wp-content/uploads/2021/12/digi-1.png"/>
</div>
 
            

        
css
                 #top-nav{
    background-color: rgb(141, 141, 222);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
}

#top-nav ul{
    margin: 0;
}

#top-nav a:hover{
    text-decoration: underline;
    text-decoration-color: brown;
    text-decoration-thickness: 5px;
    text-underline-offset: 15px;
}

#top-nav img{
    width: 196px;
    height: 41px;
}

#top-nav a{
    color: white;
    text-decoration: none;
    padding-left: 20px;
}

#top-nav li{
    list-style-type: none;
    display: inline-block;
}

#btn-start-free{
    background-color: rgb(42, 130, 58);
    border-radius: 20px;
    font-size: 15px;
    width: 100px;
    height: 50px;
    border: none;
}

#btn-start-free:hover{
    background-color: blue;
}

#btn-login:hover{
    box-shadow: 5px -5px 19px -1px rgba(0,0,0,0.52);
    -webkit-box-shadow: 5px -5px 19px -1px rgba(0,0,0,0.52);
    -moz-box-shadow: 5px -5px 19px -1px rgba(0,0,0,0.52);
}

#btn-login{
    background-color: yellow;
    border-radius: 20px;
    font-size: 15px;
    width: 100px;
    height: 50px;
    border: none;
}
 
            

            
js