How do I customize an asp:Button class?

Posted by Zhang Jingchu under ASP.NET on 4/10/2013 | Points: 10 | Views : 1514 | Status : [Member] | Replies : 2

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

How do I customize an asp:Button class?

I have this bit of code in an ASPX file:

<div class="buttonContainer" style="clear:both;width:100%;text-align:left">
   <asp:Button ID="btnProceed" runat="server"  Text="Next" OnClick="ProceedButton_Clicked" Enabled="true" />
</div>

So, if I want to make the button bigger or bolder text, how would I do it?

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: Satyapriyanayak on: 4/10/2013 [Member] [MVP] Silver | Points: 25

0	<asp:Button ID="btnProceed" runat="server" Text="Next" OnClick="ProceedButton_Clicked" Enabled="true" Font-Bold="True" ForeColor="#FF9933" Height="100px" Width="200px" /> using css <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication18.WebForm4" %> <!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>Untitled Page</title> <style type="text/css"> .TestStyle { background: orange; border: solid 1px grey; font-family: Arial, sans-serif; font-size: 20px; font-weight: bold; color: #001563; height: 25px; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Button id="btnProceed" CssClass="TestStyle" Text="Next" runat="server"/> </div> </form> </body> </html> If this post helps you mark it as answer Thanks Zhang Jingchu, if this helps please login to Mark As Answer. \| Alert Moderator

<asp:Button ID="btnProceed" runat="server" Text="Next"
OnClick="ProceedButton_Clicked" Enabled="true" Font-Bold="True"
ForeColor="#FF9933" Height="100px" Width="200px" />

using css

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication18.WebForm4" %>

<!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>Untitled Page</title>
<style type="text/css">
.TestStyle
{
background: orange;
border: solid 1px grey;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #001563;
height: 25px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:Button id="btnProceed" CssClass="TestStyle" Text="Next" runat="server"/>
</div>
</form>
</body>
</html>

If this post helps you mark it as answer
Thanks

Zhang Jingchu, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: manoranjanguptaoutlook-19221 on: 4/11/2013 [Member] Starter | Points: 25

0	Hello You can make attractive button using css3 like this is the css code style page name is button body { } .button { background:#aaa; color:#555; font-weight:bold; font-size:15px; padding:10px 15px; border:none; margin:50px; cursor:pointer; margin-top:770px; -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; -o-transition-property:width,height,-o-transform,background,font-size,opacity,color; -o-transition-duration:1s,1s,1s,1s,1s,1s,1s; -moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color; -moz-transition-duration:1s,1s,1s,1s,1s,1s,1s; transition-property:width,height,transform,background,font-size,opacity; transition-duration:1s,1s,1s,1s,1s,1s; -webkit-border-radius:5px; border-radius:5px; box-shadow:0 0 2px rgba(0,0,0,0.5); text-shadow:0 0 5px rgba(255,255,255,0.5); display:inline-block; /* It is important for the button to rotate/ } .button:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); background:#99A411; font-size:30px; color:#fff; } #container { background-color: #FFFFFF; float: left; height: 500px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 20px 0 20px 320px; position: absolute; z-index: 0; } ================================================ Aspx code is <!DOCTYPE html> <html lang="en"> <head runat="server"> <title> Home </title> <meta CHarSET="UTF-8"> <link href="Styles/Button.css" rel=stylesheet type="text/css" /> </head> <body> <div> <a class="button" href="Test.aspx">Audio</a> </Div> <div style="z-index: 1; left: 60px; top: 50px; position: absolute; height: 20px; width: 10px"> </div> </dIv> </body> </HTML> ============ It Works Manu Manoranjan Gupta Manu 9873306227 Zhang Jingchu, if this helps please login to Mark As Answer*. \| Alert Moderator

Hello
You can make attractive button using css3 like

this is the css code style page name is button

body
{

}

.button
{

background:#aaa;
color:#555;
font-weight:bold;
font-size:15px;
padding:10px 15px;
border:none;
margin:50px;
cursor:pointer;
margin-top:770px;

-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;

-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;

-webkit-border-radius:5px;
border-radius:5px;

box-shadow:0 0 2px rgba(0,0,0,0.5);

text-shadow:0 0 5px rgba(255,255,255,0.5);

display:inline-block; /* It is important for the button to rotate*/
}

.button:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);

background:#99A411;
font-size:30px;
color:#fff;
}

#container {
background-color: #FFFFFF;
float: left;
height: 500px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding: 20px 0 20px 320px;
position: absolute;
z-index: 0;

}
================================================
Aspx code is

<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title> Home </title>
<meta CHarSET="UTF-8">
<link href="Styles/Button.css" rel=stylesheet type="text/css" />
</head>
<body>
<div>
<a class="button" href="Test.aspx">Audio</a>
</Div>
<div style="z-index: 1; left: 60px; top: 50px; position: absolute; height: 20px; width: 10px">

</div>
</dIv>
</body>
</HTML>
============
It Works

Manu

Manoranjan Gupta Manu
9873306227

Zhang Jingchu, if this helps please login to Mark As Answer. | Alert Moderator

Latest Posts