This article will show you how you can create a stylish
button using css3 for your asp.net application.
Some of my previous articles are as follows: How
to Get Mouse Pointer Cordinate Inside a Div Using jQuery In Asp.Net, Get
User Detail Like City,County,Region,Zip Code Using IP Address In Asp.Net, Facebook
Style Lightbox jQuery Plugin To Display Images Like Facebook In Asp.Net, Webcam
Integration Using jQuery Webcam Plugin In Asp.Net, Asp.Net
Dynamic jQuery Photo Gallery Plugin With Zoom Effect Using Css.
So create a new asp.net application and add the below css style to the page
So create a new asp.net application and add the below css style to the page
.buttonstyleblue
{
border:
2px solid #008CBA;
background:
white;
color:
black;
padding:
16px 32px;
text-align:
center;
text-decoration:
none;
display:
inline-block;
font-size:
16px;
margin:
4px 2px;
-webkit-transition-duration:
0.4s; /* Safari
*/
transition-duration:
0.4s;
cursor:
pointer;
}
.buttonstyleblue:hover
{
background-color:
#008CBA;
color:
white;
}
.buttonstylered
{
border:
2px solid #f44336;
background:
white;
color:
black;
padding:
16px 32px;
text-align:
center;
text-decoration:
none;
display:
inline-block;
font-size:
16px;
margin:
4px 2px;
-webkit-transition-duration:
0.4s; /* Safari
*/
transition-duration:
0.4s;
cursor:
pointer;
}
.buttonstylered:hover
{
background-color:
#f44336;
color:
white;
}
.buttonstylegreen
{
border:
2px solid #4CAF50;
background:
white;
color:
black;
padding:
16px 32px;
text-align:
center;
text-decoration:
none;
display:
inline-block;
font-size:
16px;
margin:
4px 2px;
-webkit-transition-duration:
0.4s; /* Safari
*/
transition-duration:
0.4s;
cursor:
pointer;
}
.buttonstylegreen:hover
{
background-color:
#4CAF50;
color:
white;
}
|
Now here is the complete code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebFo
rm3" %>
<!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>Stylish
Button Using Css3 In Asp.net</title>
<style>
.buttonstyleblue
{
border:
2px solid #008CBA;
background:
white;
color:
black;
padding:
16px 32px;
text-align:
center;
text-decoration:
none;
display:
inline-block;
font-size:
16px;
margin:
4px 2px;
-webkit-transition-duration:
0.4s; /* Safari
*/
transition-duration:
0.4s;
cursor:
pointer;
}
.buttonstyleblue:hover
{
background-color:
#008CBA;
color:
white;
}
.buttonstylered
{
border:
2px solid #f44336;
background:
white;
color:
black;
padding:
16px 32px;
text-align:
center;
text-decoration:
none;
display:
inline-block;
font-size:
16px;
margin:
4px 2px;
-webkit-transition-duration:
0.4s; /* Safari
*/
transition-duration:
0.4s;
cursor:
pointer;
}
.buttonstylered:hover
{
background-color:
#f44336;
color:
white;
}
.buttonstylegreen
{
border:
2px solid #4CAF50;
background:
white;
color:
black;
padding:
16px 32px;
text-align:
center;
text-decoration:
none;
display:
inline-block;
font-size:
16px;
margin:
4px 2px;
-webkit-transition-duration:
0.4s; /* Safari
*/
transition-duration:
0.4s;
cursor:
pointer;
}
.buttonstylegreen:hover
{
background-color:
#4CAF50;
color:
white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button runat="server" CssClass="buttonstyleblue" Text="Click To Save"
/><br
/>
<asp:Button runat="server" CssClass="buttonstylered" Text="Click To Save" /><br />
<asp:Button runat="server" CssClass="buttonstylegreen" Text="Click To
Save" /><br />
</div>
</form>
</body>
</html>
|
In this I have show you how you can create three different stylish button using css3. In this you can create ust by changing the border color of the button and hover background color.
About the Author
0 comments:
Please let me know your view