How can I create a button with an image? - html

Question

I have an image that i want to use as a button on my page that links to other pages. I want to make it in a way that I can use small and large texts on it.
The image in question:
I have tried something but can go no where with it.
a {
background:url(http://i.imgur.com/8Isga60.png);
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
padding:30px 100px;
height:20px;
color:black;
font-size:16px;
}
JS Fiddle

Answer 1

I would recommend you drop the image idea... that concept is very 2005. With today's CSS you can easily recreate that image with pure CSS, which then is much more flexible.
If you Google "CSS button generator" you will find many online tools that help you with that... i.e. http://www.cssbuttongenerator.com/
Here is an example I did in 10 seconds and just copied the CSS they provided... granted it is a little convoluted, but it certainly works:
<style type="text/css">
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}.classname:active {
position:relative;
top:1px;
}</style>

Answer 2

You could almost do it in CSS3: JSFiddle Demo
.btn {
margin:10px;
color:white;
font-size:16px;
border:4px solid #c5c7c9;
border-radius: 50px 50px;
display:inline-block;
/* Drop shadow */
-webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
-moz-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
/* Gradient Background */
background: rgb(78,186,234); /* Old browsers */
background: -moz-linear-gradient(left, rgba(78,186,234,1) 0%, rgba(0,121,183,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(78,186,234,1)), color-stop(100%,rgba(0,121,183,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ebaea', endColorstr='#0079b7',GradientType=1 ); /* IE6-9 */
}
/* Button Sizes. */
.btn.large { padding:30px 60px; }
.btn.small { padding:10px 30px; }
HTML
my text here
my text here
my text here long text goes here

Answer 3

I think you will have to split the image, as If you try to repeat it using it as a complete image, it will also repeat the rounded parts. So take the left and right, and a pixel from the center. See this answer for reference Button using three (3) background images css
The old school version is something like using three classes for left and right and one for center with the repeating background.Create button using 3 images
Now, as mentioned in the comments, unless you are completely decided on the background images part, a pure CSS solution will probably work better.

Answer 4

Try this:
a{
background:url(http://i.imgur.com/8Isga60.png) no-repeat center;
...
}
However it moves the button too. jsfiddle
You should really look into CSS buttons instead of using images. Try CSS Button Generator

Answer 5

The problem is the left & right padding, Why not separate the link and the text so it's easy to center the content?
(edit: jsfiddle )
<p><a class="sol" href="http://imgur.com/8Isga60"><span>Does not work with larger text</span></a></p>
a.sol {
background:url(http://i.imgur.com/8Isga60.png);
display:inline-block;
padding:30px 0px;
width: 243px;
height:20px;
color:white;
font-size:16px;
text-align: center;
}