Gmail custom Buttons - CodeProject

Download Gmail_Button - 4.51 KB

Introduction

Google has launched a custom style buttons recently with its Gmail and Reader applications. Ever since it’s launched, I wanted to have the same look and feel for the buttons in my web applications.
Using the code

Following are the steps where you can create the gmail like buttons.
1.    Start a new Visual Studio 2008 Web Project and Add New aspx page.
2.    Add new style sheet.
3.    Copy and paste the following code in the style sheet, once done you have to add the stylesheet reference to the page. You can drag and drop the file on to the page and it will automatically create the reference for you.

/* Custom Buttons */
 .btn {
      display:inline-block;
      background:none;
      margin:0;
      padding:3px 0;
      border-width:0;
      overflow:visible;
      font:12px Arial,Sans-serif;
      text-decoration:none;
      color:#333;
      }
    * html button.btn {
      padding-bottom:1px;
      }
    /* Immediately below is a temporary hack to serve the 
       following margin values only to Gecko browsers
       Gecko browsers add an extra 3px of left/right 
       padding to button elements which can't be overriden.
       Thus, we use -3px of left/right margin to overcome this. */
    html:not([lang*=""]) button.btn {
      margin:0 -3px;
      }
    .btn span {
      background:#ddd url(Images/bg-button.gif) repeat-x 0 0;
      margin:0;
      padding:3px 0;
      border-left:1px solid #bbb;
      border-right:1px solid #aaa;
      }
    * html .btn span {
      padding-top:0;
      }
    .btn span span {
      position:relative;
      padding:3px .4em;
      border-width:0;
      border-top:1px solid #bbb;
      border-bottom:1px solid #aaa;
      }
      
          /* only needed if implementing separate hover/focus/active state for buttons */
    .btn:hover span, .btn:hover span span, .btn:focus span, .btn:focus span span {
      cursor:pointer; /* important for any clickable/pressable element */
      border-color:#9cf !important;
      color:#000;
      }
    .btn:active span {
      background-position:0 -400px;
      outline:none;
      }
    .btn:focus, .btn:active {
      outline:none; /* doesn't seem to be respected for <button>, only <a> */
      }

4. Now, open the web page, and copy and paste the following code in html view.

<a id="ftButton" runat="server" border="0" class="btn" href="#"                 onserverclick="Button1_Click"><span><span><img border="0;" height="13px"                src="images/icon.filter.gif" width="13px" /> Submit</span></span></a>

Note the onserverclick event in the above code (“Button1_Click”), copy and paste the following code in the page code behind file.

protected void Button1_Click(object sender, EventArgs e) {
  // Write your own code for the button click event
    }

Build and Run the Web application. Here you will have a nice looking gmail button.

Download the source code and there you will find the required images for the button.
Please visit http://www.aspnetr.com the largest collection of online .net articles for asp.net tips and tricks.

You must Sign In to use this message board.


Per page

My vote of 1
James Luterek

5:03 13 Apr '09

Adding additional mark-up and images to get what is perceived as a better looking button is a waste. Use a standard button as to not confuse the user.
Sign In·View Thread·PermaLink

My vote of 1
Dmitri Nesteruk

10:07 12 Apr '09

This does not constitute an article. To the same effect, I can View Source of CodeProject menu, copy it, and paste it as an article.
Sign In·View Thread·PermaLink