www.webdeveloper.com
Results 1 to 3 of 3

Thread: Image Button

Hybrid View

  1. #1
    Join Date
    Mar 2013
    Posts
    3

    Image Button

    Hi I got a little problem here I'm designing a Web-Software for my compagnie and I'm trying to do a Image Button exactly like the one you can see in VB form. You know the one with text and an image on the right or left in the button, but i can't figured out. At this time I was able to create a button thats as only an image or only text i want both of them and not one over the other.


    Thank you very much for the answer

    Will

  2. #2
    Join Date
    Mar 2013
    Posts
    3
    I've found the way. Just create a CSS add those property
    .button
    {
    background-image:url(report.png);
    background-repeat:no-repeat;
    background-position:right;
    text-align:left;
    }

  3. #3
    Join Date
    Apr 2013
    Posts
    135
    <input type="button" value="Add a new row" class="button_add" />
    input.button_add {
    background-image: url(/images/buttons/add.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat; /* make the background image appear only once */
    background-position: 0px 0px; /* equivalent to 'top left' */
    border: none; /* assuming we don't want any borders */
    cursor: pointer; /* make the cursor like hovering over an <a> element */
    height: 16px; /* make this the size of your image */
    padding-left: 16px; /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    }


    Best of Luck will,

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles