CODEWITHSUNDEEP
htmlcss
Pickle
Pickle

Reputation: 1124

Making buttons look the same as links

https://jsfiddle.net/dy1a2tkh/1/

header_buttons {
color: #fff;
background: #00cc66;
border-radius: 8px;
margin: 5px;
padding: 6px 6px 6px 10px;
font-size: 30px;
font-family: 'Lobster', cursive;
text-decoration: none;
display: inline-block;

}

.hb-4,
.hb-5,
a.hb-5{
background: #00cc66;
float: right;
text-decoration: none;
}

I'm trying to get the My Profile link to look exactly the same as the Log Out link right next to it.

They're both using the same class, so I guess the reason they look different is that one is a link and the other is a button. What do I need to do to make them identical?

Upvotes: 0

Views: 86

Answers (3)

anuj joshi
anuj joshi

Reputation: 63

You were doing a.hb-5 were as the a had the parent hb-5. So, the styles were not working.So, you may use

.hb-5 a{ background: #00cc66; float: right; text-decoration: none; }

Upvotes: 0

evgeny
evgeny

Reputation: 1135

Go ahead and add this one: 

.header_buttons a {
  color: #fff;
  text-decoration: none;
}

Upvotes: 0

Paul
Paul

Reputation: 942

Most of the browsers add styles to <input> and <a> elements for example. You have to remove them/set your custom styles for the specific element as well.

Fiddle and code snippet: https://jsfiddle.net/dy1a2tkh/2/

.header_buttons {
  background: #00cc66;
  border-radius: 8px;
  margin: 5px;
  padding: 6px 6px 6px 10px;
  font-size: 30px;
  font-family: 'Lobster', cursive;
  display: inline-block;
}

.header_buttons, .header_buttons > a {
  text-decoration: none;
  color: #fff;
}

.hb-4,
.hb-5,
a.hb-5{
  background: #00cc66;
  float: right;
  text-decoration: none;
}

input {
  border: none;
}
<input type="submit" name="logout" class="hb-4 header_buttons" value="Log Out" />
<div class="hb-5 header_buttons"><a href="test">My Profile</a></div>

Upvotes: 3

Related Questions