Results 1 to 2 of 2
  1. #1

    Modifying Push Button

    Does anyone know how modify a push button like the one on the website www.cuil.com ?

    How can you change the font and change the color of the push button..

    thanks in advance.

  2. #2
    It's done with a css style, replacing the button with an image.

    If you look at the source code for the page (select "view, Page Source" in your browser), the html code for the button is:

    <button class="search" type="submit" title="Search">Search</button>

    So, we know there is a css class called "search".

    If you look in the head of the html page, you will find the link to the stylesheet:

    <link rel="stylesheet" href="http://www.cuilimg.com/static/v2/css/modern.min.css?1217617958" type="text/css" media="all" />

    Copy that address into the address bar of your browser, and voila!, you'll have their style sheet. This is one of the least user-friendly css files I've run across, but the style you're looking for is "search". The relevant line of code (which I've reformatted to be slightly more readable) is:

    button.search {
    background:url(http://www.cuilimg.com/static/images...btn-search.png) 0 0 no-repeat;
    width:60px;height:23px;
    margin-left:2px;
    margin-top:5px;
    vertical-align:top;
    border:none;
    cursor: pointer;
    float:right;
    text-indent:-99999pt;
    }


    This defines the style for the search button. The highlighted lines replace the normal button with an image; the text-indent pushes the button text way off out of sight on the left of the page, and the background brings in a background image that takes its place.

    If you copy the URL of the background image into a browser, you'll be able to see the image in question.

    So there you go: Not only do you now know how it was done, you've also got a tutorial in drilling through source code. Two for the price of one!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Subscribe to us on YouTube