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
meetpdAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lazyberezovskyCommented:
Try use attribute  cssClass="classy"
0
lazyberezovskyCommented:
Here is code
<asp:Button ID="Button1" Text="Bla-Bla-Bla" CssClass="classy" runat="server" />

Open in new window

0
Umar Topia.Net Full Stack DeveloperCommented:
Make sure that you are referencing the Css/Style file.
and then
use CSSClass = "classy" in your button code.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

meetpdAuthor Commented:
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?
0
meetpdAuthor Commented:
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?
0
Umar Topia.Net Full Stack DeveloperCommented:
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

0
lazyberezovskyCommented:
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" />
0
lazyberezovskyCommented:
Ah sorry, didnt see your stylesheet content. You should not use such things like hover (or attach it via onmouseover attribute of asp:Button). Also consider using skin for your button.

See details:
http://david.safitech.com/?p=48
http://forums.asp.net/t/1414792.aspx
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Umar Topia.Net Full Stack DeveloperCommented:
Hey meetpd
did you tried solution provided by me?
0
meetpdAuthor Commented:
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.
0
meetpdAuthor Commented:
Hi, I dont' see solution to my problem from those links :(
0
meetpdAuthor Commented:
Can an Expert please help?

0
dannocrackerCommented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.