How can I create a button with an image?

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:

enter image description here

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

There might be a solution for some length, but at some point an image will always be too small (because it is a fixed size). You really should consider a pure CSS solution for the button (without image). Just google "CSS button generator" — Steve, Jun 24 '14 at 15:30
You should recreate the button in CSS instead of using a static image. That way it will size to whatever content is within it without distorting the style of the button. — APAD1, Jun 24 '14 at 15:32
The old-school method of doing this is: http://alistapart.com/article/slidingdoors — Wesley Murch, Jun 24 '14 at 15:36
css will not be able to incorporate the design that is in the image :( — user3771900, Jun 24 '14 at 15:39
Main requirement is the indent on the sides and the gloss at the bottom as you can see in the image. I have actually tried pure css but can not make the indent and the gloss. — user3771900, Jun 24 '14 at 15:52

score 2 · Answer 1 · answered Jun 24 '14 at 15:34

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>

We can probably drop most of those `-moz-*` and `-webkit-*` prefixes now (it's *so* 2009). — Wesley Murch, Jun 24 '14 at 15:39
Sorry don't want a full CSS button, I need to use the design of the image. Thanks for the time. — user3771900, Jun 24 '14 at 15:41
@WesleyMurch - fully agreed. Just copied/pasted straight from the website to show how quickly you can create a CSS button, with little knowledge of CSS. But you are right, it should probably be cleaned up. — Steve, Jun 24 '14 at 15:46
@user3771900 - You might want to talk to your designer then. A pure CSS solution can get you very close (as Nick R's solution shows) and is much, much, much more flexible. Pure image solutions will break constantly and are a b***h to maintain. — Steve, Jun 24 '14 at 15:48
@Steve I know Steve I am trying to pursue my designer to dump the image's design. — user3771900, Jun 24 '14 at 15:58

Nick R · Answer 2 · 2014-06-24T15:44:25.980

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

<a href="#" class="btn large">my text here</a>      
<a href="#" class="btn small">my text here</a>
<a href="#" class="btn small">my text here long text goes here</a>

+1 - Very nice demo of how close you can get to the original design and how flexible it gets for long, short, tall content. Nicely done! — Steve, Jun 24 '14 at 15:44

score 0 · Accepted Answer · edited May 23 '17 at 12:07

0

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.

edited May 23 '17 at 12:07

Community

1
1

answered Jun 24 '14 at 15:31

Ernesto

1,523
1
14
32

1

That approach is very 2005... we can be much more light-wight and flexible with pure CSS these days. – Steve Jun 24 '14 at 15:37
While I agree, the OP did not put an age restriction on the solution. Now, I updated the answer, as the old and cool new (and probably more efficient) options have been presented many times in other questions. – Ernesto Jun 24 '14 at 15:41
I will have to use the old school idea for now. Thanks @Ernesto – user3771900 Jun 24 '14 at 15:56

score 0 · Answer 4 · answered Jun 24 '14 at 15:37

0

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

answered Jun 24 '14 at 15:37

Reck

68
3

score 0 · Answer 5 · answered Jun 25 '14 at 09:52

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;
    }

How can I create a button with an image?

5 Answers5