How to make sexy buttons with CSS

 

Address: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Preface

This tutorial will teach you how to create beautiful text buttons by using CSS. The Dynamic Button saves you a lot of time, and it takes a lot of time to create a graph to make it even happier at the end of the day. What do you get here:

Sliding Doors Technology

Because we want our buttons to bend, we need to adapt the background image to the length of the text. To this end, we will use Sliding Door Technology and two complementary images to make an image that looks simple and will be extended.

The button is a <A> label nested with a <span> label. Each button contains a different background of the sliced image. The HTML code is like this:

<A class = "button" href = "#"> <span> bring world peace </span> </a>

Nothing unusual, right? Next, we need to come up with a clear design for our buttons in both normal and pressed states. This is what I think:

We will make an image in two states. To make the switching between normal and pressed states, we can move the background image vertically to display two states. This CSS style allows us to complete switching without JavaScript. Let's merge the two images and use the Slicing Technology to cut them. Part of the image will hold the text of the button and it will be set to a reasonable PX, and the height will be set to 24 PX.

Button Style

Finally, we need some CSS styles to put them together. However, since we may have to arrange several button levels, I decided to set it to float by default.

. Clear {</P> <p> overflow: hidden; </P> <p> width: 100%; </P> <p >}</P> <p> A {</P> <p> color: # c08; </P> <p >}</P> <p>. button {</P> <p> Background: transparent URL ('.. /images/bg_button_a.gif ') No-repeatscroll top right; </P> <p> color: #444; </P> <p> display: block; </P> <p> float: Left; </P> <p> Font: normal 12px Arial, sans-serif; </P> <p> Height: 24px; </P> <p> margin-Right: 6px; </P> <p> padding-Right: 18px; </P> <p> text-Decoration: none; </P> <p >}</P> <p>. button span {</P> <p> Background: transparent URL ('.. /images/bg_button_span.gif ') No-Repeat; </P> <p> display: block; </P> <p> line-Height: 14px; </P> <p> padding: 5px 0 5px 18px; </P> <p>}

 

We now have a pretty button, but it does not completely give us visual feedback when it is pressed. So let's add the eye-catching style:

 A. button: Active {</P> <p> background-position: bottom right; </P> <p> color: #000; </P> <p> outline: none; </P> <p >}</P> <p>. button: activespan {</P> <p> background-position: Bottom left; </P> <p> padding: 6px 0 4px 18px; </P> <p>}

Alldone