Preview

HTML

SCSS

*, ::after, ::before {
  box-sizing: border-box;
}

/* css element */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;700;900&display=swap');

.navbar-rounded {
  background-color: #ffffff;
  border-radius: 40px;
  padding: 20px;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      display: inline-block;
      
      a {
        font-family: 'Fira Sans', sans-serif;
        font-size: 14px;
        font-weight: 400;
        text-decoration: none;
        display: block;
        padding: 12px 40px;
        border-radius: 100px;
        color: #162B39;
        text-align: center;
        transition: all .4 ease-in-out;
        
        &:hover {
          background-color: #983BB3;
          color: #ffffff;
        }
        
        &:focus {
          background-color: #7C2794;
          color: #ffffff;
        }
        
        &:active {
          background-color: #7C2794;
          color: #ffffff;
        }
      }
    }
    
    li.active {
      a {
        background-color: #983BB3;
        color: #ffffff;
      }
    }
  }
}

@media (max-width: 576px) {
  .navbar-rounded {
    ul {
      li {
        display: block;
        margin-bottom: 10px;
        width: 100%;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}