1

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?

Banshee
  • 15,376
  • 38
  • 128
  • 219

1 Answers1

0

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.

MassivePenguin
  • 3,701
  • 4
  • 24
  • 46
  • So what you saying is that its not possible to switch a submit button to a regular html button with some kind of sliding door and keep hover effect? I know that I have done this with ASP.NET MVC but in that case I needed to implement a simple javascript and then specify in the submitbutton what form to submit. Do I maby have to go the same way here? In this case I want to change all buttons on this site : http://www.bradspel.net/ from beeing a image with text to be clear text and with a button (with hover effect). – Banshee Mar 05 '13 at 09:56
  • You should be able to wrap the submit button in a `span`, and you can use `span.classHere:hover, span.classHere:hover input` to style it, but you'll still run into problems with some browsers not playing nicely (and you'll be fighting against the native hover behaviour for the button unless you explicitly nullify it beforehand) and users being unable to click the span (unless you use some Javascript to apply the submit button's behaviour to its parent span too). It's a really hacky way to go about it, though. – MassivePenguin Mar 05 '13 at 10:22