This is what I want to create

Some of My HTML code

<div class="account">
   <ul>
     <li> <a href="#">Profile</a> </li>
   </ul>
 </div>

This is some of my CSS, but its not working:

.account ul li {
  float            : right;
  list-style       : none;
  padding-right    : 20px;
  margin-top       : 5px;
  margin-bottom    : 5px;
  border-width     : 5px;
  border-color     : #fcbf49;
  background-color : white;
  }
.account ul li a {
  text-decoration : none;
  font-family     : 'Baloo 2', cursive;
  font-size       : 30px;
  color           : #fcbf49;
}

CodePudding user response：

.account ul li {
  max-width: max-content;
  list-style       : none;
  padding-right    : 20px;
  margin-top       : 5px;
  margin-bottom    : 5px;
  /* border-width     : 5px; */
  border: 7px solid #fcbf49;
  padding: 10px;
  border-radius: 30px;
  /* border-color     : #fcbf49; */
  background-color : white;
  }
.account ul li a {
  text-decoration : none;
  font-family     : 'Baloo 2', cursive;
  font-size       : 30px;
  color           : #fcbf49;
}

<div class="account">
   <ul>
     <li> <a href="#">Profile</a> </li>
   </ul>
 </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

.btn {  
  padding: 5px 20px 5px 20px;
  border: 5px solid #fcbf49;  
  font-family: 'Baloo 2', cursive;
  font-weight: bold;
  font-size: 30px;
  color: #fcbf49;
  border-radius: 8px;
}

<button class="btn">Profile</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

And i see you need it for list. I think for a navbar then use this:

.btn {  
  padding: 5px 20px 5px 20px;
  border: 5px solid #fcbf49;  
  font-family: 'Baloo 2', cursive;
  font-weight: bold;
  font-size: 30px;
  color: #fcbf49;
  border-radius: 8px;
  text-decoration: none;
}

ul {
  list-style: none;
}

<div class="account">
   <ul>
     <li> <a class="btn" href="#">Profile</a> </li>
   </ul>
 </div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Here you go