Can anybody help me with a means to style a standard <asp:button> control with css to look like a metro live tile. I do NOT need the button to update text or flip over and reveal more information, I merely want it to just resemble the shape and size of a
live tile (and if I could include an image and text inside it, it would be a plus). I'm redesigning an asp.net website to be 'touch' friendly and the metro live tile is (In my humble opinion) wonderfully perfect as far as big, meaty fingers on touchscreens
are concerned. I might even squish the buttons to half their height if I need to save space on a page, but they will still be large enough for fingers.
I've looked at using a <div> which is really easy to style, but I'm fussy and still want all of the events that <asp:button> (or <asp:imagebutton>) has available.
I've found all manner of bootstrappers and JQuery alternatives to create full live tiles, but I stress again, I'm only interested in the basic layout, not the functionality associated with live tiles.
A learning experience is one of those things that say, 'You know that thing you just did? Don't do that.'
Hornwood509
Member
54 Points
86 Posts
Style asp:button like a Metro tile
Jan 22, 2013 01:23 PM|LINK
Can anybody help me with a means to style a standard <asp:button> control with css to look like a metro live tile. I do NOT need the button to update text or flip over and reveal more information, I merely want it to just resemble the shape and size of a live tile (and if I could include an image and text inside it, it would be a plus). I'm redesigning an asp.net website to be 'touch' friendly and the metro live tile is (In my humble opinion) wonderfully perfect as far as big, meaty fingers on touchscreens are concerned. I might even squish the buttons to half their height if I need to save space on a page, but they will still be large enough for fingers.
I've looked at using a <div> which is really easy to style, but I'm fussy and still want all of the events that <asp:button> (or <asp:imagebutton>) has available.
I've found all manner of bootstrappers and JQuery alternatives to create full live tiles, but I stress again, I'm only interested in the basic layout, not the functionality associated with live tiles.
alankarp
Contributor
2042 Points
345 Posts
Re: Style asp:button like a Metro tile
Jan 22, 2013 02:33 PM|LINK
have a look at below URL
http://ace-subido.github.com/css3-microsoft-metro-buttons/buttons.html
Profile
roopeshreddy
All-Star
20119 Points
3320 Posts
Re: Style asp:button like a Metro tile
Jan 22, 2013 03:24 PM|LINK
Hi,
Check this code -
<style type="text/css"> .live-tile-button { width:200px; height:100px; background:#ffee55; border:1px solid #fff; } </style> <asp:Button ID="button" runat="server" Text="Button" CssClass="live-tile-button" />Hope it helps u...
Roopesh Reddy C
Roopesh's Space
Ruchira
All-Star
42876 Points
7015 Posts
MVP
Re: Style asp:button like a Metro tile
Jan 22, 2013 03:38 PM|LINK
Hello,
Check the links in below resolved thread.
http://forums.asp.net/t/1858480.aspx/1?how+to+create+simple+metro+style+website+in+visual+studio+2010+
My Tech blog | TwitterPlease 'Mark as Answer' if this post helps you.