Share via

Changing ASP button text color

  • Article

Question

Tuesday, October 18, 2011 2:02 PM

How can change ASP button text color, when there isn't a control onmouseover() ?

thnaks

All replies (4)

Tuesday, October 18, 2011 2:19 PM âś…Answered

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

<style type="text/css">

#button1:hover 
{
    color:Red;
}

</style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="button1" runat="server" Text="button" />
    </div>
    </form>
</body>
</html>

Or with straight css

 

Tuesday, October 18, 2011 2:12 PM

Do you want to change color of asp button text repetadly or at any event?

Tuesday, October 18, 2011 2:13 PM

hi!

in CSS

.button{
 cursor:pointer;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #ffffff;
 text-decoration:none;
 text-shadow:
  0px -1px 0px rgba(000,000,000,0.4),
  0px 0px 0px rgba(255,255,255,0);
 -webkit-transition:all 0.3s ease, top 0ms linear;
 -moz-transition:all 0.3s ease;
 -o-transition:all 0.4s ease;
 -ms-transition:all 0.4s ease;
 transition:all 0.3s ease;
 border-radius: 99px;
 -moz-border-radius: 99px;
 -webkit-border-radius: 99px;
 
 }
 .button:hover{
  text-decoration:none;
 }
.button.round{
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
}

.button.big{
 padding: 8px 20px;
}

.button.blue{
 background-color:#1e6fca; 
 background: -moz-linear-gradient(
  top,
  #65b1f0 0%,
  #246eab);
 background: -webkit-gradient(
  linear, left top, left bottom,
  from(#65b1f0),
  to(#246eab));
 
 border: 1px solid #275682;
 -moz-box-shadow:
  0px 1px 2px rgba(000,000,000,0.3),
  inset 0px 1px 0px rgba(255,255,255,0.6);
 -webkit-box-shadow:
  0px 1px 2px rgba(000,000,000,0.3),
  inset 0px 1px 0px rgba(255,255,255,0.6);
 
 }
 .button.blue:hover {
 color:#FFF;
 -webkit-box-shadow: 0px 0px 6px rgba(54, 154, 239, 0.8), 0px 0px 3px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0px 0px 6px rgba(54, 154, 239, 0.8), 0px 0px 3px rgba(0, 0, 0, 0.1);
 -o-box-shadow: 0px 0px 6px rgba(54, 154, 239, 0.8), 0px 0px 3px rgba(0, 0, 0, 0.4);
 -ms-box-shadow: 0px 0px 6px rgba(54, 154, 239, 0.8), 0px 0px 3px rgba(0, 0, 0, 0.4);
 box-shadow: 0px 0px 6px rgba(54, 154, 239, 0.8), 0px 0px 3px rgba(0, 0, 0, 0.1);
 }
 .button.blue:active{
 background: -webkit-gradient(
  linear, left top, left bottom,
  from(#246eab),
  to(#65b1f0));
 }

 <asp:Button ID="btnUpdate" runat="server" Text="Update Account" TabIndex="6" **class="button round blue big" **                    OnClick="btnUpdate_Click" />

 

hope this helps

 

Tuesday, October 18, 2011 2:14 PM

Heres an example of how to change button font color to red on mouse over and back on mouse out with jquery

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#button1").mouseover(function () {
                $("#button1").css('color', 'red');
            }).mouseout(function () {
                $("#button1").css('color', '');
            });
        }); 
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="button1" runat="server" Text="button" />
    </div>
    </form>
</body>
</html>