HTML CSS How to add image icon to input type button

Question

I m using the below CSS  but it puts an image in the center of the button  Any way to left or right align an icon using  lt input type  button  gt   so that the text and the image fit and align nicely   background  url   common assets images icons 16x16 add png    background-position center  background-repeat no-repeat

User · Answer

you can try this trick   1st  do this    lt label for  img  gt      lt input type  submit  name  submit  id  img  value  img-btn  gt      lt img src  yourimage jpg  id  img  gt   lt  label gt    2nd  style it    lt style type  text css  gt     img hover          cursor  pointer          input type submit           display  none        lt  style gt    It is not clean but it will do the job

User · Answer

This is the minimal style needed  fitting the image to the default button size    x000D   x000D   lt input type  button  value     style  background-image  url http   www geppoz eu geppoz png  background-size 100  100    gt  x000D   x000D   x000D    the  spaced  value is needed to keep baseline alignment  just in case you need it

User · Answer

What I would do is do this    Use a button type    lt button type  submit  style  background-color rgba 255 255 255 0 0   border none   id  resultButton  onclick  showResults     gt  lt img src  images search png    gt  lt  button gt    I used background-color rgba 255 255 255 0 0   So that the original background color of a button goes away  The same with the border none  it will take the original border away

User · Answer

lt img src  http   www pic4ever com images 2mpe5id gif  gt               lt button class  btn btn- lt  php echo  settings  button background      gt   type  submit  gt  lt  php echo  settings  submit button text      gt  lt  button gt

User · Answer

Simply add icon in button element here is the example      lt button class  social-signup facebook  gt         lt i class  fa fa-facebook-official  gt  lt  i gt          Sign up with Facebook lt  button gt

User · Answer

This should do do what you want  assuming your button image is 16 by 16 pixels    lt input type  button  value  Add a new row  class  button-add    gt      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  lt a gt  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        Example button     Update  If you happen to use Less  this mixin might come in handy    icon-button  icon-url   icon-size  16px   icon-inset  10px   border-color   000   background-color  transparent        height   icon-size   2      padding-left   icon-size    icon-inset   2      padding-right   icon-inset      border  1px solid  border-color      background   background-color url  icon-url  no-repeat  icon-inset center      cursor  pointer     input button-add        icon-button  http   placehold it 16x16    background-color   ff9900       The above compiles into    input button-add     height  32px    padding-left  36px    padding-right  10px    border  1px solid  000000    background   ff9900 url  http   placehold it 16x16   no-repeat 10px center    cursor  pointer      JSFiddle

User · Answer

If you absolutely must use input  try this   background-image  url       background-repeat  no-repeat  background-position   lt left right gt   padding- lt left right gt    lt width of image gt px    It s usually a little easier to use a button with an img inside    lt button type  submit  gt  lt img gt  Text lt  button gt    However the browser implementations of button for submitting are inconsistent  as well as the fact that all button values are sent when button is used - which kills the  what button clicked  detection in a multi-submit form

User · Answer

sshow s answer did it for me  too   navigation css           buttonConfiguration       width  40px      background-color  red     transparent         border  none      color  white      padding  5px 10px      text-align  center      text-decoration  none      display  inline-block      font-family  corbel      font-size  12px      font-weight  normal      margin  1px 1px      cursor  pointer       background-image  url     images icons5 gear 16 png        background-position  center     0px 0px         background-repeat  no-repeat      vertical-align  middle             frameMenu php        PHP  Javascript and HTML code        lt  --  lt li gt  lt a target  frameBody  href  admin conf confFunctions php  gt  lt input type  button  class  buttonSuperAdmin  value   lt     oLanguage- gt getExpression  confSettings    title    C e n t e r s     gt   gt  lt  a gt  -- gt   lt li gt  lt a target  frameBody  href  admin conf confFunctions php  gt  lt input type  button  class  buttonConfiguration  value    gt  lt  a gt   lt ul gt   lt li gt  lt a target  frameBody  href  admin conf getglobals php   gt  lt input type  button  class  buttonSuperAdminSub  value   lt     oLanguage- gt getExpression  centerSettings    confAdmin1    GetGlobals     gt   gt  lt  a gt  lt  li gt   lt li gt  lt a target  frameBody  href  admin conf getcwd php   gt  lt input type  button  class  buttonSuperAdminSub  value   lt     oLanguage- gt getExpression  confSettings    centerAdmin2    GetCWD     gt   gt  lt  a gt  lt  li gt   lt  ul gt   lt  li gt           I have tested this successfully under the lastest versions of Firefox and Chrome  as of February 9th  2019

User · Answer

you can try insert image inside button http   jsfiddle net s5GVh 1415    lt button type  submit  gt  lt img src  https   aca5 accela com bcc app themesDefault assets gsearch disabled png   gt  lt  button gt

User · Answer

This works well for me  and I m handling hover and click CSS as well  by changing background color    HTML  here showing 2 images  image1 on top of image2     lt button class  iconButton  style  background-image  url  image1 png    url  image2 png      onclick  alert  clicked     gt  lt  button gt    CSS  my images are 32px X 32px  so I gave them 4px for padding and a 5px border rounding     iconButton       width  36px      height  36px      background-color   000000      background-position  center      background-repeat  no-repeat      border  none      border-radius  5px      cursor  pointer      outline  none      iconButton hover       background-color   303030      iconButton active       background-color   606060     button  -moz-focus-inner       border  0

User · Answer

If you re using spritesheets this becomes impossible and the element must be wrapped    btn      display  inline-block      background  blue      position  relative      border-radius  5px     input   btn after      color   fff     btn after      position  absolute      content           right  0      width  1 3em      height  1em     input      background  transparent      color   fff      border  0      padding-right  20px      cursor  pointer      position  relative      padding  5px 20px 5px 5px      z-index  1      Check out this fiddle  http   jsfiddle net AJNnZ

User · Answer

lt button type  submit  style  background-color transparent  border-color transparent   gt      lt img src  images button masuk png  height  35   gt   lt  button gt   lt button type  reset  style  background-color transparent  border-color transparent   gt      lt img src  images button reset png  height  35   gt   lt  button gt    I hope this helps you

[html] HTML / CSS How to add image icon to input type="button"?

Examples related to html

Examples related to css