TEXT 수정이 가능한 버튼
CSS Technique: Inline Buttons (2.0)
Image-buttons displaying text can be replaced by text-only links. For these buttons are formated as inlines, they can be placed within the text, as well as treated as text — you can put them into lists, justify them (center, right), float them etc. See the example and "Details" bellow.
How does it work?
Following code is used (see the examples' source code for more details). The (X)HTML code:
The style is defined like this:
_width:12em;
font: bold 65%/1 Verdana, sans-serif;
margin: 0 0.2em; padding: 0.1em 0; _padding:0;
border: 1px solid black;
white-space:nowrap;
text-decoration: none;
vertical-align:middle;
background: #ccc;
color: black;
}
.inline-button em {
_width:1em; _cursor:hand;
font-style: normal;
margin:0; padding: 0.1em 0.5em;
background: white;
color: black;
}
.inline-button span {
_width:1em; _cursor:hand;
margin:0; padding: 0.1em 0.5em 0.1em 0.3em;
}
.inline-button:hover {
background: #666;
color: white;
}
.inline-button:hover em {
background: black;
color: white;
}
사용예 샘플 : http://www.wellstyled.com/css-inline-buttons.html
TEXT 수정이 가능한 버튼
Lorem ipsum Some Link dolor sit amet...
Lorem ipsum Some Link dolor sit amet (the same link, just unstyled) (stejný odkaz, ale nenastylovaný) .
The
inline-button class makes the main functionality, the additional second class may make color variantions. You can make lots of your own combinations, e. g.:.orange em { background: white; color: #c60 }
.blue { background: #06c; color: white }
.blue em { background: white; color: #06c }
.green { background: green; color: white }
.green em { background: white; color: green }
...
<a class="inline-button orange" href="the_url"><em>RSS</em><span> Export</span></a>
<a class="inline-button blue" href="the_url"><em>W3C</em><span> XHTML 1.0</span></a>
<a class="inline-button green" href="the_url"><em>ICQ</em><span> 1234567</span></a>
Details
The link is made of two adjacent elements (em and span in this case, any other inline elements may be used). No whitespace must be between them. The link has 1px border and its vertical padding must be exactly the same as the padding used in the innner elements (this is because vertical padding is placed around the content of inline elements having no effect on their position).
All those "_properties" in CSS are here because of MSIE5/Win (for details see the Underscore Hack). First, setting the width property in MSIE5/Win changes an inline element into an inline-block, while the width is acting as the minimal width (see details in the "Inline blocks" article). This is why the width:1em is enough for the inner elements, but we have to guess the width of the outer element (12em is used in the example). Second: because of inline-blocks in MSIE5/Win, the padding has influence to the their position — that's why the padding has been changed to zero (_padding:0). In addition, _cursor:hand has been set, otherwise MSIE5/Win keeps the text selection cursor while hovering the link.
The compatibility
It should work everywhere. It has been tested in MSIE5/Win, MSIE6/Win, Mozilla, Opera and Safari (only MSIE/Mac fails, but it's virtually dead browser). All browsers will adjust the button width to its content size, just in MSIE5/Win all buttons will have the same width (according to the _width set within the .inline-button selector).
