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.A0 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 itA0 :P ).
So let's look at the markup of this new thing:
A0A0A0 <button id="btnTest" runat="Server" type="button" class="nButton" onserverclick="btnTest_ServerClick">
A0A0A0A0A0A0A0 <div class="login"></div>
A0A0A0A0A0A0A0 <div>This is my button</div>
A0A0A0 </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
{
A0A0A0 background-color:#84A1D6;
A0A0A0 border:solid 2px #415D9B;
A0A0A0 min-width:70px;
A0A0A0 height:23px;
A0A0A0 padding-left:3px;
A0A0A0 vertical-align:middle;
}
A0
.nButton:hover
{
A0A0A0 background-color: #a0bdf2;
}
A0
.nButton div
{
A0A0A0 float:left;
}
A0
.nButton .login
{
A0A0A0 vertical-align:middle;
A0A0A0 background-image:url(Images/save.png);
A0A0A0 background-repeat:no-repeat;
A0A0A0 background-position:left top;
A0A0A0 width:16px;
A0A0A0 height:16px;
}
Very similar to my last post.A0 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....A0A0A0 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....