Posts Tagged css button

CSS Button Styling 教學

Posted by Chowky in Design on September 24, 2009

每一個website 都需要button (按鈕). 這是非常基本的element. 卻扮演著一個很重要的角色，用來配搭不同的theme。

以 User Experience (UX) 的角度來說，一個button ，必須令人知道button 是clickable (可按的) ，簡單來說就是一看上去就令人知道是button。

若兩樣加起來，就比較困難，既要看上去似一個button，外表亦要好看，又要配合設計主題。

這個教學主要是利用了css sprite 的技術。css sprite.
先看看完成圖~

畫方面，請參考原文

Chowky 著重於怎implement

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Button</title>
 
<style type="text/css">
 
* { margin: 0; padding: 0; /* Quick and Dirty Reset 非常有用*/ }
 
body {
	background: url(bg-repeat.png);
}
 
#demo {
	width: 433px; margin: 100px auto;
}
 
</style>
</head>
 
<body>
 
<div id="demo">
 
</div>
 
</body>
</html>

加入button link的html

<p>< a href="#" class="press-it-btn">Press it</p>

加入button 的css (default state)

#demo p a.press-it-btn {
	display: block;
	width: 433px; height: 174px;
	background-image: url(button-sprite.png);
	background-position: top;
	text-indent: -9999px; /* 因為seo 的關係，我們要KEEP字(Press it)，所以要踢走字 */
}

加入hover 和active state.

#demo p a.press-it-btn:hover {
	background-position: center;
}
#demo p a.press-it-btn:active {
	background-position: bottom;
}

當你試的時候，某些browser (e.g.firefox)，會加入了一個核突的dotted line
因為踢走字的關係而出現的

所以連outline 都不要

a { outline: none; }

但如果當user 用keyboard netvigate 的時候 (用tab) 就不會知道他們focus的地方，所以自己加上highlighting

#demo p a.press-it-btn:hover, #demo p a.press-it-btn:focus

Demo: http://line25.s3.amazonaws.com/wp-content/uploads/2009/css-button/demo/demo.html
Souce: http://line25.com/tutorials/how-to-build-a-simple-button-with-css-image-sprites/

Share

,

No Comments