connectseekers.com

Tuesday, 3 June 2014

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.


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


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
Email Id : contact@aspdotnet-pools.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


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top