I have a ASP.NET .NET 4.0 Webform website. I got a couple of submit buttons on almost all page in this website and they are generated with the following code :
<asp:Button id="b1" Text="Submit" runat="server" />
Now I need to switch this for a CSS sliding door effect (or somthing simular) to get the same look on all buttons(submit and link buttons)
Sliding door : http://alistapart.com/article/slidingdoors
How do I do this as easy as possible?
The biggest problem I've found with the 'sliding doors' technique is that you need to add an extra element to the markup. You should be able to achieve this by wrapping the button in a <span> tag:
<span><asp:Button id="b1" Text="Submit" runat="server" /></span>
And giving the span some padding to the left or right (depending on which side you want the smaller part of the graphic to appear). You will probably run into problems if you want to apply a rollover effect though (the span won't pick up on the :hover state of the button/link), and users won't be able to click the sliver of image that's outside the button/link unless you add JavaScript into the equation.
This is a lot of work for relatively little benefit.
Without seeing the design you're trying to replicate it's difficult to offer a precise solution; you might find, though, that most of what you're trying to achieve by using images can be done with CSS, and applied to links as well as buttons. It won't be as cross-browser as the 'sliding doors' technique (onledr versions of IE don't support rounded corners, for instance) but most modern browsers will cope just fine.