Styling buttons with images? - html

Ive been trying to style a submit button using an image. I would use CSS but the button is too complex design wise. I have tried adding a background image to a button but the image was badly positioned. I have also tried using
<input type="image" src="myimage.png">
But alas this is not a submit button so It doesn't work. I have looked and tried everything I believe possible but can't find a solution to making the button submit the form. Thanks.

if <input type="image"> doesn't work as expected just try instead
<button type="submit"><img src="myimage.png"></button>
but as I wrote in the comment above your code should work fine too

You have different possibilities for a submit button:
<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->
These are all submit buttons. Pick the one, which suits you best.
Now you can choose to put an image between the button or use background-images and position them properly.
Example for button with background-image:
button {
background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>
(Or as a fiddle)

Use a button element and style it with css. Don't omit the text, you form should be accessible without images or css.
<button type='submit'>Informative submit text</button>
button {
background-image:url('myimage.png');
}

In case someone needs a newer html5 good answer:
<button id='' name='' value='' ><img src='img.jpg' /></button>

<input type="image" src="myimage.png">
or
<input type="submit" style="background:url(myimage.png)">

Related

Good practice for a html button with image as background and uses href

I've been reading on how to implement a button. There are a lot of answers.
None go into why a specific version is preferred over the other. What is the standard good practice way of today?
The button I am specifically looking for is an image (no text), uses href and has to submit.
I've come up with the following but it is not working:
<button class="btn-googleplus" href="/auth/google" type="submit"></button>
<input type="submit" class="btn-googleplus" />
button .btn-googleplus {
background-image: url("img/googleplus.png") no-repeat center center;
}
I've seen variants like this (I dislike as it seems complicated to have an img inside the button tag):
<button href="/auth/google" type="submit">
<img id="img" src="img/googleplus.png" />
</button>
Adding href to a button won't work. You need to put the button in a form wherein you specify your href value (the url) in the action attribute.
<form action="/auth/google">
<button href="/auth/google" type="submit">
<img id="img" src="img/googleplus.png" />
</button>
</form>

Bootstrap refresh icon with text on Submit button

I would like to have a "Refresh" button on my page. For that I decided to use the bootstrap refresh-icon style. The icon appears on my button but it does not leave much room for the text "Refresh". Here is the code and Fiddle...
<input class="icon-refresh" type="submit" value="Refresh" name="Test"> </input>
http://jsfiddle.net/jjaleel/kVHbV/339/
Anyone have any suggestions on how I can expand the button width so it shows both the refresh icon and the text?
Thanks.
You could use a button tag instead, they were made to be styled with much more control than an input.
Here's how I would use one with the latest bootstrap..
<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
Use a <button>, with the submit action, instead:
<button type="submit"><i class="icon-refresh"></i> Test</button>
JSFiddle
Put the refresh icon in a span inside a button:
<button type="submit" value="Refresh" name="Test"><span class="icon-refresh"></span> </button>
update (based on OP comment)
Without being able to change the markup at all, this is tough. To get rid of the "Refresh" text, set the text-color to transparent. For sizing, set display to inline-block and fix height and width to 20px.
input{
display:inline-block;
color:transparent;
height:20px !important;
width:20px !important;
}

Creating a custom html button with background Image and Text

I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
I tried this -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
this is exactly what I have in one of my css and usually what I do in this situation:
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
Here's how I created buttons with actual pics on them along with text. In CSS I put:
button {
display: inline-block;
height: 200px;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 400px;
}
#alldogs-close-CSS {
background-image: url( All_dogs.jpg );
/*background-size: 100px 130px;*/
height: 150px;
width: 300px;
}
The button controls my height and width and #alldogs-close-CSS is the pic I wanted to show on the button.
In my Index.html page I just put:
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.

Styling part of a (submit) button-label

I have a submit button which is simply marked up as this:
<input type='submit' name='foo' value='Continue ⇢' class='button' />
I would like to make the rightward dotted arrow a tad larger.
<input type='submit' name='foo' value='Continue <span class='makemeatadlarger'>⇢</span>' class='button' />
is obviously not working... Is there a simple way to do this (I am not interested in adding tons of outher divs/spans and preferable without having to use images)
UPDATE
Inspired by accepted answer below I came up with this:
html
<button type='submit' name='foo' value='Continue' class='button'>Continue</button>
css
.button:after {
content: ' ⇢';
font-size: 220%;
height: 26px;
margin-top: -19px;
float: right;
}
example
And heres a live example over at jsfiddle
I don't believe so because taking the span out takes it out of the button. The best way would be a button instead of an input like so: <button type="submit" name="foo" class="button">Continue <span class='makemeatadlarger'>⇢</span></button>
You must style the button text as a whole, not just a portion. To achieve your desired effect wouldn't it be much easier to create an image?

Buttons with images in plain HTML / CSS

is there a way to add an image to a regular <input type = "button" /> besides the text?
Yes - you should be able to set the background image on the button in CSS. My preferred method is to use the button tag e.g.
<button type="submit">text</button>
You can put any html you want within the tag and style it.
We can have css for button .
background: url(images/blue.png) ;
You want the "image" input type
<input type="image" src="/path/to/image.png" value="Click here" size="32,32" border="0" />
Button in HTML (For location I'd normally place all images in a images folder)
<BUTTON type="submit" src="/images/Button.png" value="">
Button via CSS, where myBtn is defined in the class file
<BUTTON type="submit" class="myBtn" value="">
Where myBtn is defined in the class file
.myBtn{
background: url(/images/Button.PNG) no-repeat;
cursor: pointer;
width: 140px;
height: 80px;
border: none;
}
<input type="button" style="background-image:url(flower.jpg)" value="Click">
It will set the background image for button using HTML.
An image in the button or an image as the button?
Image AS button:
<input type="image" src="/images/myImage.png" alt="An image as a button"/>
Image inside button....I don't think so.