mdumka
July 19, 2006, 7:54pm
1
Hi Guys,
I am trying to simulate a button using CSS,
I want the hyperlink to have padding on all 4 sides, but I want the block to only be as wide as the text plus the padding. I thought that width:inherit would work with display:block but it does not.
Any Idea’s?
a.button:link, a.button:visited {
background-color:#ff9900;
color:#FFFFFF;
font-weight:bold;
border-left:2px solid #EFA96C;
border-top:2px solid #EFA96C;
border-right: 2px solid #AE5C13;
border-bottom:2px solid #AE5C13;
display:block;
font-size:1em; margin:5px;
text-decoration:none;
padding:10px 10px 10px 10px;
width:50px;
text-align:center;
}
a.button:hover {
text-decoration:underline;
}
<a href="#" class="button">Go</a>
If you really need to have them displayed as block elements, then consider putting them in a list:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css" media="all">
a.button:link, a.button:visited {
background-color: #f90;
color: #fff;
font-weight: bold;
border-left: 2px solid #efa96c;
border-top: 2px solid #efa96c;
border-right: 2px solid #ae5c13;
border-bottom: 2px solid #ae5c13;
font-size: 1em;
margin: 5px;
text-decoration: none;
padding: 0.7em;
}
a.button:hover {
text-decoration: underline;
}
li {
height: 3em;
}
</style>
</head>
<body>
<p>Lorem</p>
<a href="#" class="button">Go</a>
<a href="#" class="button">Stop</a>
<p>Ipsum</p>
<ul style="list-style: none; padding: 0; margin: 0">
<li><a href="#" class="button">Go</a></li>
<li><a href="#" class="button">Stop</a></li>
</ul>
</body>
</html>
mdumka
July 19, 2006, 8:59pm
4
Hi xangelusx, thanks for the responces …
I went with the inline-block solution except it does not work in IE5, is there a reaosn for this?
Thanks
Off the top of my head, maybe inline-block isn’t supported in IE 5. You can try just leaving the display attribute undeclared, which will make it the default “inline” and should achieve the same effect.