Fancy Button 2.0 (Not A Link button)
I got a shwack of feedback and comments from my recent post: Get rid of regular buttons, use Link Buttons. I actually thought my solution was a great one, apparently I was a bit off base. That's not to say that my solution was totally wrong - Yes I'm stubborn... but I do admit that I am "occasionally" wrong... occasionally...
From the feedback, I decided to make a new "better looking" button. This one is about the same amount of work as the previous, but I believe this one is up to standards - which was the biggest subject from the feedback.
Another comment I got was regarding users might be confused because it was a link, and not a button. If they look the same, the user will never be able to tell. (I have yet to see a user that looks at the markup of a web application and gets their underwear in a knot because something that is supposed to be an <input /> is an <a />... though I'd really like to see it :P ).
So let's look at the markup of this new thing:
<button id="btnTest" runat="Server" type="button" class="nButton" onserverclick="btnTest_ServerClick">
<div class="login"></div>
<div>This is my button</div>
</button>
I have changed this to use the <button> element. The <button> element allows you to further style what the button looks like.
I used <div> elements so I can control the vertical alignment of the text - as well as further styling if needed.
Here's my CSS:
.nButton
{
background-color:#84A1D6;
border:solid 2px #415D9B;
min-width:70px;
height:23px;
padding-left:3px;
vertical-align:middle;
}
.nButton:hover
{
background-color: #a0bdf2;
}
.nButton div
{
float:left;
}
.nButton .login
{
vertical-align:middle;
background-image:url(Images/save.png);
background-repeat:no-repeat;
background-position:left top;
width:16px;
height:16px;
}
Very similar to my last post. This functions the same, and it has the same functionality as a regular <asp:button />.
Now let's see what it looks like:
That made my day... or did it.... Here is what I get when I surround ALL my markup with a <button>.
Now I wonder how many that read this are going to go to their websites and try it out....