Download 100% FREE Office Document APIs for .NET
DotNetFunda.com
Online: 914
Home > Forums > ASP.NET >

How do I customize an asp:Button class?

Posted by Zhang Jingchu under ASP.NET on 4/10/2013 | Points: 10 | Views : 1479 | Status : [Member] | Replies : 2
Write New Post | Search Forums | AnsweredResolved 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

Up
0
Down
<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

Up
0
Down
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

Login to post response

Latest Posts