CODEWITHSUNDEEP
htmlcss
Gandalf StormCrow
Gandalf StormCrow

Reputation: 26212

How to create button backgrounds with css

I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that's why I ask does anybody remember the technique.

There is left side picture i.e

enter image description here

And then very wide body image which ends up with right curved border/shadow like this :

enter image description here

So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.

Does anybody knows how this technique is called or can refer me to the link? or give me code example, I'd appreciate any of those

Upvotes: 0

Views: 261

Answers (4)

Antonio Vildes Barbosa
Antonio Vildes Barbosa

Reputation: 127

Using CSS properties instead of images can make your applications faster.

In this case you could just use: Border-Radius, Box-Shadow combined with a gradient background.

Here you can find a good Gradient Editor:

http://www.colorzilla.com/gradient-editor/

How to use Border-radius and Box-shadow:

http://www.css3.info/preview/rounded-border/

http://www.css3.info/preview/box-shadow/

Upvotes: 0

Jaideep Singh
Jaideep Singh

Reputation: 141

Here's the technique which I think you are looking for (using the same images you attached):

HTML:

​<a href="#" class="button">
  <span>Small</span>
</a>
<a href="#" class="button">
  <span>Large button</span>
</a>​​​​​​​​​​​​

CSS:

​.button {
    background: url('https://i.sstatic.net/htUHL.png') no-repeat left top;
    padding-left: 9px;
    height: 37px;
    display: inline-block;
    text-decoration: none;
    color: #555;
    text-shadow: 0 1px 1px #FFF;
    font-family: sans-serif;
    font-size: 0.8em;
}
.button span {
    background: url('https://i.sstatic.net/ID6nO.png') no-repeat right top;
    display: inline-block;
    height: 37px;
    padding: 5px 12px 5px 3px;
}
.button:hover span {
    ​color: #333;
}​

Link to the demo: http://jsfiddle.net/v284q/

Upvotes: 0

No Results Found
No Results Found

Reputation: 102755

This technique is a variation of the "Sliding Doors" technique:

Basically you use markup like this:

<button><span>Text</span></button>

Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:

button {
    background:url(main-image.png) top right no-repeat;
    border:0;
    padding:0;
    width:80px;  /* with only 1 "door", you might need to set a width */
    /* other resets may be necessary */
}
span {
    background:url(left-door.png) left top no-repeat;
}
button, span {
    height:37px; /* height of your sprite */
    display:block;
}​

Demo: http://jsfiddle.net/Kqs3m/

Your results may vary depending on your sprites and the natural width of the content.

Upvotes: 0

feeela
feeela

Reputation: 29932

When using an image for the start and one for end of the button, these technique is called "sliding doors" and there are myriads of search results with any search engine…

For an introduction read the A List Apart article: http://www.alistapart.com/articles/slidingdoors

But as Neurofluxation asked you in the comment above: Why the hell would you do that years after we have multiple other methods of styling a button in CSS? The A List Apart article for example is from 2003 - which is an age in Internet terms.

Upvotes: 1

Related Questions