CODEWITHSUNDEEP
htmlcss
Taha Paracha
Taha Paracha

Reputation: 63

What CSS do I do to make this button (look below)?

This is what I want to create The image I want my button to look like

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;
}

Upvotes: 0

Views: 78

Answers (6)

A Haworth
A Haworth

Reputation: 36465

There were a few little problems with the given code.

The main one is that the border was not given a style solid so it didn't pick up the other border styling.

The other main point is that the word is required to be central within the borderso the padding needs to be symmetric left and right and also symmetric top and bottom.

One other observation - I suspect you require the whole list to be on the right hand side so this snippet sets this as float right. However, it may be useful to look at other ways of doing this such as positioning right or maybe the whole navbar could be set with flex - some items to the left some central - some to the right.

.account ul {
  float: right;
}

.account ul li {
  list-style: none;
}

.account ul li a {
  text-decoration: none;
  font-family: 'Baloo 2', cursive;
  font-size: 30px;
  color: #fcbf49;
  border-width: 5px;
  border-color: #fcbf49;
  background-color: white;
  border-style: solid;
  border-radius: 20px;
  padding: 10px 20px;
}
<div class="account">
  <ul>
    <li> <a href="#">Profile</a> </li>
  </ul>
</div>

Upvotes: 0

BiswajitPaloi
BiswajitPaloi

Reputation: 641

html

<a href="#"><button class="button button1">Profile</button></a>

css

 .button
{
  background-color: #FFFF00; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  font-weight: bold;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 25px;
}

.button1 {
  background-color: white; 
  color: #ff8c00; 
  border: 5px solid #ff8c00;
  }

demo enter image description here

Upvotes: 0

Rob Monhemius
Rob Monhemius

Reputation: 5144

Your main mistake was not setting a border-style. I'm sure you van figure out the rest yourself ;).

.account ul li {
  float            : right;
  list-style       : none;
  padding-right    : 20px;
  margin-top       : 5px;
  margin-bottom    : 5px;
  border-width     : 5px;
  border-style     : solid; /* you forgot this */
  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>

Upvotes: 0

Maik Lowrey
Maik Lowrey

Reputation: 17556

.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>

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>

Upvotes: 1

Sreeharsh Rajan
Sreeharsh Rajan

Reputation: 21

Here you go 😊.

.account ul li {
   list-style       : none;
  padding:1rem;
}

.account ul li a {
   text-decoration       : none;
   color           : #fcbf49;
  font-weight: bolder;
   font-family     : 'Baloo 2', cursive;
  font-size:2rem;
  border: 4px solid #fcbf49;
  border-radius:20px;
  padding: 10px 24px;
  
}
<div class="account">
   <ul>
     <li> <a href="#">Profile</a> </li>
   </ul>
 </div

Upvotes: 0

Musafiroon
Musafiroon

Reputation: 683

.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>

Upvotes: 2

Related Questions