asked on

How to apply this CSS class to ASP.NET button?

Hi,

I have a CSS class which is currently applied to a HTML button.

I want to get the same effects using ASP.NET button. But when I apply the class it does not show any changes.

Can you suggest a way to achieving the same hover effect using ASP.NET button?

I have attached the Image as well as the class used.

I am using below code to generate HTML button.
<button name="action_button" class="classy" type="submit"><span>START</span></button>

button.classy span,a.button.classy span{display:block;height:36px;padding:0 10px 0 15px;line-height:36px;background:url(../Images/bigbutton_matrix.gif) 0 0 no-repeat #ddd;}
button.classy.glowing,a.button.classy.glowing{background-position:100% -40px;}
button.classy.glowing span,a.button.classy.glowing span{background-position:0 -40px;}
button.classy:hover,a.button.classy:hover{color:#fff;text-shadow:-1px -1px 0 rgba(0,0,0,0.3);background-position:100% -80px;}
button.classy:hover span,a.button.classy:hover span{background-position:0 -80px;}
button.classy.mousedown,a.button.classy.mousedown{color:#fff;text-shadow:-1px -1px 0 rgba(0,0,0,0.3);background-position:100% -120px;}
button.classy.mousedown span,a.button.classy.mousedown span{background-position:0 -120px;}
button.classy::-moz-focus-inner{margin:-1px -3px;}
button.classy img,a.button.classy img{position:relative;top:-1px;margin-right:3px;vertical-align:middle;}
button.classy:disabled{opacity:.5;}

button.classy, a.button.classy  {
background:url("../Images/bigbutton_matrix.gif") no-repeat scroll 100% 0 #DDDDDD;
border:medium none;
color:#333333;
cursor:pointer;
font-family:helvetica,arial,freesans,clean,sans-serif;
font-size:12px;
font-weight:bold;
height:36px;
margin-left:10px;
overflow:visible;
padding:0 5px 0 0;
text-shadow:1px 1px 0 #FFFFFF;
white-space:nowrap;
}

Open in new window

bigbutton-matrix.gif

lazyberezovsky

Try use attribute cssClass="classy"

lazyberezovsky

Here is code

<asp:Button ID="Button1" Text="Bla-Bla-Bla" CssClass="classy" runat="server" />

Open in new window

Umar Topia

Make sure that you are referencing the Css/Style file.
and then
use CSSClass = "classy" in your button code.

meetpd

ASKER

No, it did not work. I am not getting the CSS class applied correctly.

Can you please run the code at your end and confirm?

meetpd

ASKER

If you see the class, it has :

button.classy, etc.

Does this "button" refer to HTML button? Do we need to replace the "button" in the class with something else?

Umar Topia

Yeah you could do that

Try removing button all together from your css file

.classy span,a.classy span{display:block;height:36px;padding:0 10px 0 15px;line-height:36px;background:url(../Images/bigbutton_matrix.gif) 0 0 no-repeat #ddd;}
.classy.glowing,a.classy.glowing{background-position:100% -40px;}
.classy.glowing span,a.classy.glowing span{background-position:0 -40px;}
.classy:hover,a.classy:hover{color:#fff;text-shadow:-1px -1px 0 rgba(0,0,0,0.3);background-position:100% -80px;}
.classy:hover span,a.classy:hover span{background-position:0 -80px;}
.classy.mousedown,a.classy.mousedown{color:#fff;text-shadow:-1px -1px 0 rgba(0,0,0,0.3);background-position:100% -120px;}
.classy.mousedown span,a.classy.mousedown span{background-position:0 -120px;}
.classy::-moz-focus-inner{margin:-1px -3px;}
.classy img,a.classy img{position:relative;top:-1px;margin-right:3px;vertical-align:middle;}
.classy:disabled{opacity:.5;}

.classy, a.classy  {
background:url("../Images/bigbutton_matrix.gif") no-repeat scroll 100% 0 #DDDDDD;
border:medium none;
color:#333333;
cursor:pointer;
font-family:helvetica,arial,freesans,clean,sans-serif;
font-size:12px;
font-weight:bold;
height:36px;
margin-left:10px;
overflow:visible;
padding:0 5px 0 0;
text-shadow:1px 1px 0 #FFFFFF;
white-space:nowrap;
}

Open in new window

lazyberezovsky

Yes, just remove button tag name from your stylesheet.
.classy span,a.button.classy span{display:block;height:36px;padding:0 10px 0 15px;line-height:36px;background:url(../Images/bigbutton_matrix.gif) 0 0 no-repeat #ddd;}
.classy.glowing,a.button.classy.glowing{background-position:100% -40px;}
etc

And use <asp:Button ID="Button1" runat="server" CssClass="classy" Text="Button" />

ASKER CERTIFIED SOLUTION

lazyberezovsky

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Umar Topia

Hey meetpd
did you tried solution provided by me?

meetpd

ASKER

HI Umartopia,

No. It did not work. Can you share the screenshot if its working at your end?

Thanks!

Hi Lazyberezovsky: Let me check the links that you have provided...will back to you soon.

meetpd

ASKER

Hi, I dont' see solution to my problem from those links :(

meetpd

ASKER

Can an Expert please help?

dannocracker

Whenever I want to use my CSS attributes, I have had more consistent success by dragging/dropping the stylesheet file from the solution browser onto the web page in question. Then I would set the CLASS property for the button to one of the following:
button.classy
or
classy
or
.classy
etc. (try different combos until your class attribute is resolved.