« New Aggregator in Testing | Main | Will the New Browser Wars End Before Really Getting Started? »
March 22, 2005
CSS XML Buttons
It's not rocket science, but here's an easy way to make XML buttons(or any kind of button you want) using CSS. In other words, this button (XML) is not an image, but is done all with CSS. I like using CSS buttons when I can because it gives me a lot of control over the look, and I can change the label easily without opening an image editing application. See? Christian Cantrell
Anyway, here's the CSS class:
.xml-icon {
padding: 0px 3px 1px 3px;
margin: 0;
text-align: center;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #fff;
background-color: #ff6600;
border: 1px solid;
border-color: #ffc8a4 #3f1a01 #3f1a01 #ffc8a4;
cursor: pointer;
}Posted by cantrell at March 22, 2005 11:15 AM
Comments
Real nice! Most people don't realize the simplicity of creating these kinds of things.
Posted by: Abel Rios at March 22, 2005 11:31 AM
another thing that a lot of people dont realize (myself included untill recently) is that there is an html 4 tag called button, that can be used to make these sort of things as well. I use them oftentimes instead of links, just putting a anchor tag around them. you can also style them very easily using css, just use button {}
Posted by: Ryan Guill at March 22, 2005 1:24 PM
I really want to start adding entries like this into my blog... simple but very useful. I've used this a few times in the past to give links and form buttons the same look throughout an app. This also brings back memories... I remember way back when creating buttons in photoshop different colored edges so the button would look 3D. Then plugins came along and 3d buttons were overused so the formula is lost to me. On this example did you just wing it when picking the edge colors or have you found a formula to use? I'd like to find a formula and create a little javascript CSS button generator.
Posted by: Anthony at April 4, 2005 4:28 PM
Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).