How to make a button with image inside?


Tags: html,css,internet-explorer

Problem :

I want to make a buttons that looks like:

enter image description here

I tried this:

css:

button {
   color: #900;
   border: 1px solid #900;
   font-weight: bold;
   width: 200px;
   height: 100px;
 }

 button img {
   margin-right: 5px;
   vertical-align: middle;
 }

html:

<button class="btnExample" type="submit" value="Submit">
    <img src="./images/img04.jpg" width="18" height="18" alt=""/>Submit</button>

And result:

enter image description here

Why image so small(18*18px)? How to make image bigger?



Solution :

change this to increase size

<img src="./images/img04.jpg" width="28" height="28" alt=""/>Submit</button>

to change size change width=" " and for height=" "

button {
   color: #900;
   border: 1px solid #900;
   font-weight: bold;
   width: 200px;
   height: 100px;
 }

 button img {
   margin-right: 5px;
   vertical-align: middle;
 }
<button class="btnExample" type="submit" value="Submit">
    <img src="http://4vector.com/i/free-vector-kuba-arrow-button-set-clip-art_117492_Kuba_Arrow_Button_Set_clip_art_hight.png" width="58" height="58" alt=""/>Submit</button>


    CSS Howto..

    Class inside of Div not showing properly

    How can I change the font (family) for the labels in Chart.JS?

    CSS - how to display submenu options horizontally while maintaining spacing of horizontal main menu options

    How do i make the header/footer extend width-wise to fit the screen, and the main content extend height-wise to fit the screen?

    how to append an icon to an input search?

    How to apply an inner stroke to an image with just CSS?

    How to create custom buttons with arrows for twitter bootstrap?

    CSS- how to give an object with scooped corners a border colour?

    How to highlight a currently selected item/section in Wordpress with CSS (maybe PHP too)?

    Parsley.js 2.0 How to use the provided css file

    How to make colspan work without affecting width of the other rows

    CSS: How do I stop hover effects from pushing my text?

    How to add a color overlay to a background image?

    JQuery UI Elements' Image not shown

    How best to use jQuery: with HTML or CSS for formatting

    How to use Chrome Inspector to show the popup css for a jquery plugin

    how to create circle image wrapper

    How to correctly style drop-down menu

    jquery ui droppable : how to dropp an element outside a div with overflow:hidden?

    Is not showing anything, or showing “undefined”

    CSS: how to vertically and horizontally align an image?

    How to implement a finished coded html/css page into CMS [closed]

    How to copy (or reflect instantly) CSS edited on Inspected elements on the browser to the actual css file?

    Do you know about this weird thing. “AS3, Button width cannot change by setStyle(). However, inline CSS can change width.”

    How to retain CSS transform scale on checked state

    How to make the css asset follow a certain order in symfony2 projetcs

    How to change the width of an HTML upload field with CSS?

    How to position these images in CSS?

    how to use tinymce content.css in rails

    How to negate conjunction of two attributes in CSS selector