So, suppose there is a situation where we need to have a zoom effect in an asp.net button ( that button in asp.net controls thinggies ...).
Its a known fact that new css allows you to add zoom and other crazy effects to you buttons, but asp.net button is not exactly a html button ( thats why its called an asp.net button I guess). So if you just add an asp button and try to call that button ID from the css using #<id>,
well, it wont work.
WHYYYYY???
simple, just drag and drop an asp.net button in to a web form and press view in browser, right click and check out the page source..
the button id is not the same as the one in the source, now its a computer generated ID. That means, its not a good idea to use #<id> to select the button from the style sheet.
but its not the end of the world,
instead, we can use CLASSES :D
let me add some example code...
here is a sample css class for the button:
**Remember this doesn't work with IE yet
.buttonStuff
{
width:60px;
height:30px;
font-weight: bold;
background-color: Silver;
border-radius: .75em;
-webkit-transition: all.35s;/*Safari and Google chrome*/
-moz-transition: all .35s; /* Firefox 4 */
-o-transition: all .35s; /* Opera */
}
.buttonStuff:hover
{
font-weight: bold;
background-color: Red;
width:80px;
height:40px;
}
this is how you call that class from the button:
<asp:Button ID="Button1" class = "buttonStuff" runat="server" Text="Button" onclick="Button1_Click" />
Now, this button will have rounded edges and when you hover over it, it'zoom it self etc.
in buttonStuff class, border-radius is the curve of the button.
-webkit-ransition: all .35s meas, do the "animating" to ALL the changes, when going in to the other state, here the hover is a different state, in this state button size is a different, font color, background color are different, these changes will apply smoothly in.35 seconds when the above line is added.
so try it out,
all you have to do is,
1. add an asp.net button to you aspx page.
2. add those 2 classes to the style sheet
3. call the style sheet from the page (if its not already called)
4. add that class to the button.
then you are done :D
