PDA

View Full Version : How Are These Buttons Rounded



tomyknoker
Apr 10th, 2007, 07:16 PM
Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/

ffmariners
Apr 10th, 2007, 07:25 PM
i didnt see you say "browse" buttons...

Arbitrator
Apr 10th, 2007, 08:33 PM
They just used negative margins and overlapping borders.

the_scyphe
Apr 10th, 2007, 08:38 PM
they're not rounded, they're square.

_Aerospace_Eng_
Apr 10th, 2007, 08:46 PM
They aren't entirely square. This is their html

<a href="/forum/troubleshooting/" class="btn"><span>Browse</span></a>
This is their CSS

a.btn
{
float: left;
margin: -3px 0 0;
padding: 1px 0;
color: #E9F08F;
background-color: #2E2E2E;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
vertical-align: middle;
}

a.btn span
{
color: #E9F08F;
position: relative;
display: block;
padding: 0 5px 1px;
border: 2px solid #2E2E2E;
margin: 0 -1px;
}

nolvorite
Apr 10th, 2007, 08:52 PM
They made the code too complicated.

tomyknoker
Apr 10th, 2007, 09:03 PM
They aren't entirely square. This is their html

<a href="/forum/troubleshooting/" class="btn"><span>Browse</span></a>
This is their CSS

a.btn
{
float: left;
margin: -3px 0 0;
padding: 1px 0;
color: #E9F08F;
background-color: #2E2E2E;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
vertical-align: middle;
}

a.btn span
{
color: #E9F08F;
position: relative;
display: block;
padding: 0 5px 1px;
border: 2px solid #2E2E2E;
margin: 0 -1px;
}hi _Aerospace_Eng_ (http://www.codingforums.com/member.php?u=18194) vbmenu_register("postmenu_555757", true); if you have time could you explain how it actually works? That's what I don't get... Like how are the corners rounded without an image? Isn't padding always square?

koyama
Apr 10th, 2007, 09:23 PM
Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/
Before you get too excited, notice that it isn't working in IE6 and IE7 due to IE's buggy implementation of negative margins. The inner element is not overlapping the outer element in either one side (IE6) or both sides (IE7).

Here is code that demonstates the problem plus a fix to solve the problem using negative values for margin-top and margin-bottom instead of for margin-left and margin-right (margins are exaggerated, change colors to suit your needs)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Round Corner</title>
<style type="text/css">
* {
font-size: 30px;
}
body {
color: white;
background: green;
}
#good_outer {
float: left;
background: yellow;
border-top: 5px solid red;
border-bottom: 5px solid red;
position: relative;
}
#good_inner {
position: relative;
margin-top: -5px;
margin-bottom: -5px;
margin-right: 5px;
margin-left: 5px;
background: blue;
}
#buggy_outer {
float: left;
background: red;
border-left: 5px solid yellow;
border-right: 5px solid yellow;
position: relative;
}
#buggy_inner {
position: relative;
margin-left: -5px;
margin-right: -5px;
margin-top: 5px;
margin-bottom: 5px;
background: blue;
}
</style>
<h2 style="clear: left">Good rounded corners</h2>
<div id="good_outer">
<div id="good_inner">
Good rounded corners
</div>
</div>
<h2 style="clear: left">Buggy rounded corners IE6/7</h2>
<div id="buggy_outer">
<div id="buggy_inner">
Buggy rounded corners IE6/7
</div>
</div>
</body>
</html>