Tuesday, 3 June 2014

Browse: Home Tips and Tricks How to style input and submit button with CSS in Asp.net

How to style input and submit button with CSS in Asp.net

6/03/2014 - By Pranav Singh 0

Whenever we create a new asp.net application or html application on that case look and feel is one of the most important parts.

So in this article I will show you how you can convert the asp.net button control or html input r submit button into a stylish button control just by applying CSS/CSS3.

Some of my previous article of asp.net are as follows: Passing Value From One Form to Another in Asp.net Using C#.Net, Free jQuery Spell Checker Plugins For Asp.Net, Reset Div Height by Using jQuery.
Some of my windows application articles are follows: Displaying More than One Month in the Windows Forms MonthCalendar Control Using C#.Net, Email Validation in Windows Application C#.Net and VB.Net | Validating Email ID in TextBox in C# .Net,.

So for this article create new asp.net website and add a new page in it. Now in your .aspx page add the below mention code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Page2.aspx.cs" Inherits="ProjectDemo_Asp.et.Page2" %>

<!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>How to style input and submit button with CSS in Asp.net</title>
    <style type="text/css">
        .buttonstyleCss
        {
            border: 1px solid black;
            background-color: white;
            background-repeat: no-repeat;
            background-position: 1px center;
            padding: 1px 10px 1px 25px;
            height: 25px;
            cursor: pointer;
            font-family: Arial;
            background-image: url(images/add.png);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h3>How to style input and submit button with CSS</h3>
       Old Button:<br /><input type="button" value="Submit" /><br /><br />
       With Css: <br /><input type="button" value="HTML Input Button"  class="buttonstyleCss"/>
       <asp:Button  ID="Button1" runat="server" Text="Asp.Net Button"  class="buttonstyleCss" />
    </div>
    </form>
</body>
</html>

In above code we have added a style sheet

    <style type="text/css">
        .buttonstyleCss
        {
            border: 1px solid black;
            background-color: white;
            background-repeat: no-repeat;
            background-position: 1px center;
            padding: 1px 10px 1px 25px;
            height: 25px;
            cursor: pointer;
            font-family: Arial;
            background-image: url(images/add.png);
        }
    </style>

For applying style sheet we just needed to add the style name with class attribute of button or input control.

<input type="button" value="HTML Input Button"  class="buttonstyleCss"/>
<asp:Button  ID="Button1" runat="server" Text="Asp.Net Button"  class="buttonstyleCss" />

Now view the page in browser.


 DOWNLOAD


Tags: , , , , , ,
About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Global Classified : Connectseekers.com
© 2014 aspdotnet-pools.com Designed by Bloggertheme9.
back to top