Pickle Pickle - 3 months ago 16
CSS Question

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?

Answer

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>