Slicing photoshop image into a HTML5 + CSS3 button (issue with the corners)

StackOverflow https://stackoverflow.com/questions/20792328

  •  21-09-2022
  •  | 
  •  

Question

I am trying to slice a .psd image of a button into a HTML5 + CSS3 button. But I don't want just to set it as background. I want to slice 1 repeating tile for the background and 4 corners, so the button expands correctly, according to its content. Can someone give me a basic idea how to place the corners? I searched in the forum, but noone slices the button, they just put the whole image as background. Thats what I have so far:

EDIT: I have one tile repeating as background, and 4 images of the whole 4 corners.

HTML:

 <!DOCTYPE html>
<html>
<head>
    <title>Exercise1</title>
    <link rel="stylesheet" type="text/css" href="exercise1.css">
</head>
<body>
    <div><a href="">OK</a></div>
    <div><a href="">Cancel</a></div>
    <div><a href="">View More Information</a></div>
</body>
</html>

CSS:

body {

    background-color: black;
}

a {

    color: black;
    text-decoration: none;
    display: inline-block;
    padding-top: 13px;
    background: url(pictures/background_tile.png) repeat-x center top;
    height: 32px;
    overflow: hidden;

}

And that's how I am trying to put the corners, but it gets all messed up:

div {
    background: url(pictures/btn_top_left.png) no-repeat left top;
}
Was it helpful?

Solution

This is the gist of it, you'll need to fix the right side AND slice the buttons more accurately. Also, these don't expand on height, only width. If you want height, then make the corners taller, 3-4 times as tall and play around with it. No one does this these days, you can make buttons that look identical-enough using css3.

http://jsfiddle.net/26tWC/

<ul class="button">
     <li class="tl">&nbsp;</td>
        <li class="text"><a href="">Button Text</a></li>
        <li class="tr">&nbsp;</li>
     <li class="bl">&nbsp;</li>
     <li class="br">&nbsp;</li>
</ul>



<ul class="button">
     <li class="tl">&nbsp;</td>
        <li class="text"><a href="">Longer Text Goes Here</a></li>
        <li class="tr">&nbsp;</li>
     <li class="bl">&nbsp;</li>
     <li class="br">&nbsp;</li>
</ul>


body {
    background-color: #fff;
    font-family:arial;
}

.button {
    height:48px;margin:0;padding:0 38px 0 19px;
    list-style:none;white-space:nowrap;position:relative;
     display:inline-block;
}

.button .text {
    background: url(http://i43.tinypic.com/2zgem49.gif) repeat-x center top;
    white-space:nowrap;
    height:48px;
    line-height:48px;
}

.button a {text-decoration:none;color:#000;}

.button li {position:absolute;}

.button .text {float:left;height:47px;position:relative;}

.tl {
    width:19px;
    top:0;
    left:0;
    height:24px;
    background: url(http://i43.tinypic.com/5xifdg.gif) no-repeat 0 0;
}

.bl {
    width:19px;
    bottom:0;
    left:0;
    height:24px;
    background: url(http://oi42.tinypic.com/dninnl.jpg) no-repeat 0 0;
}



.tr {
    width:38px;
    right:0;
    top:0;
    height:24px;
    background: url(http://oi43.tinypic.com/2vn0sk6.jpg) no-repeat 0 0;
}


.br {
    width:38px;
    bottom:0;
    right:0;
    height:24px;
    background: url(http://oi42.tinypic.com/2yjskde.jpg) no-repeat 0 0;
}

Use these tools to make this in CSS3:

http://css3generator.com/

http://www.colorzilla.com/gradient-editor/#fdffff+0,e6f8fd+21,c8eefb+54,bee4f8+75,b1d8f5+100;Custom

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top