Δημιουργία Web2.0 Button με τα CSS3

Στράτος Ιορδανίδης στις 12.03.10. Kατηγορίες CSS με Ένα Σχόλιο

Σε προηγούμενο άρθρο είδαμε πως να μπορείτε δημιουργήσετε εύκολα ένα web2.0 button σε 5 μόνο βήματα. Αυτό έγινε με την βοήθεια του Adobe Photoshop. Τώρα θα δούμε πως να δημιουργήσουμε το ίδιο web2.0 button με την βοήθεια των CSS3.

Αν δούμε στο βοήθημα για το πως μπορούμε να φτιάξουμε ένα Web 2.0 κουμπί στο Photoshop, θα μπορέσουμε να καταλήξουμε σε ένα γραφικό. Σε αυτό εδώ το βοήθημα θα δούμε πως μπορούμε να φτιάξουμε το ίδιο κουμπί, αλλά αυτή τη φορά χρησιμοποιόντας html και css.

Τι θα χρειαστούμε

Για την δημιουργία του κουμπιού θα χρειαστούμε τα εξής:

Ένα ντεγκρατνέ για το φόντο
Στρογγυλοποιημένες γωνίες
Ένα μικρό πλαίσιο
Σκιά
Και σκιά για το κείμενο μας

HTML

Δημιουργούμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen,projection" />
<title>CSS3 Button</title>
</head>
<body>
Button
</body>
</html>

CSS

Αφού έχουμε το κουμπί μας έτοιμο ώρα να του δώσουμε και χρώμα

Δημιουργούμε ένα αρχείο και το ονομάζουμε style.css. Γράφουμε τον εξής κώδικα:

.css3button a {
background:url("background.gif") repeat-x scroll center bottom #0DB9E9;
padding: 5px 10px 5px 10px;
text-align: center;
font-weight: bold;
color: #006D85;
text-decoration: none; border: 1px inset #aaa;
-webkit-border-radius: 8px; width: auto; -moz-border-radius: 8px;  -khtml-border-radius: 8px;  border-radius: 8px;
-moz-box-shadow: 0 0 0 #666666;
-webkit-box-shadow: 1px 1px 1px #666;
box-shadow: 1px 1px 1px #666;
text-shadow: rgba(0,0,0, .5) 0px -1px 0px;
border: 1px solid #106176;
}
.css3button a:hover  {
background: #ffffff;
text-shadow: rgba(0,0,0, .5) 0px 1px 0px;
}

Τελικό Αποτέλεσμα

Tags: button, CSS, css3 button, css3 css button, HTML, κουμπί

Στράτος Ιορδανίδης { Προσωπική Ιστοσελίδα / Άρθρα Στο GreekTuts }

Ο Στράτος Ιορδανίδης ασχολείται με το Web Design περισσότερο από 1 χρόνο. Είναι ο δημιουργός του Marked Lines, ένα blog σχετικά με το (Web) Design Inspiration. Ακολουθήσετε τον στο twitter ή στο forrst!

Ένα Σχόλιο στο άρθρο Δημιουργία Web2.0 Button με τα CSS3

Petros Dimitriadis says:
March 31, 2010 at 07:46
Με το css3 μπορείς να βάλεις και gradient αν θές http://www.westciv.com/tools/gradients/ αλλά θα το βλέπουν μόνο όσοι έχουν Safari 4 και Firefox 3.6.
Reply