Tips for Web Designers, Developers, and Bloggers

Posts tagged ‘css buttons’

Top CSS3 Benefits

CSS3 came out a seemingly long time ago, but still many people don’t use it or they are not as comfortable with using it. This article will show you the top benefits of CSS3 and  maybe interest you into using CSS3 in your next project.

  1. Borders: Being able to create rounded corners on a box is a really cool feature on CSS3. There is now a simple way to create rounded corners on boxes without stressing out. Before you might have spent countless amounts of time arranging everything into tables and then adding in images and whatnot to create a box with rounded edges, but now you can do all of that with only a few lines of CSS, making this a great time-saver.
  2. Text Effects: Another great time-saver in CSS3 is the ability to create fancy text effects with (again) only a few lines of CSS. This means that, whereas before you might have to create the text in Photoshop and add effects and then export it and add text as an image, you only need to type in those few lines of CSS and you’re all done with your text-affects.
  3. Multi-Column Layouts: Though it is not supported in Safari and Mozilla based browsers, this feature is really nifty. With a couple of lines of code, like this:
     -moz-column-width: 15em; -webkit-column-width: 15em; -moz-column-gap: 2em; -webkit-column-gap: 2em;

    you can create a great multi-column layout. This kind of a layout would be ideal for people creating magazine websites or newspaper sites that will need more than the regular single-column outlook.

  4. CSS3 Transitions:This feature is probably the coolest thing I ever saw in CSS3. With the use of code as such:
    #box {
    width: 580px;
    padding: 9px 15px;
    background-color: #ED8029;
    color: white;
    border-radius: 5px;
    -webkit-transition: background-color 5s;
    -moz-transition: background-color 5s;
    -o-transition: background-color 5s;
    -ms-transition: background-color 5s;
    transition: background-color 5s;
    }
    #box:hover {
    background-color: #A7B526;
    }

    you can create a nifty hover action that will look great and save you time.

These are all great features and are also widely accepted in browsers, saving you both time and effort whenever you are working on something.

Sexy CSS buttons

Here are the next generation of CSS buttons. Derived from:

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

Now, here is the CSS:

.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}

a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}

a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}

a.button:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}

*Keep in mind: I HAD NOTHING TO DO WITH THE DEVELOPMENT OF THIS.

With the extra measure for everyone’s most hated browser (IE), the HTML would look like this:

<a href="#" onclick="this.blur();"><span>Launch Crap...</span></a>

Don’t forget to put the images in the file that you have the code:

Span

Span

A

A

That is all.

**This post was derived from OTHER sources**