CSS Button Styling 教學

每一個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
About Chowky
Chowky 希望可以透過這個blog 來分享自己學到的知識。亦希望可以分享最新的資訊。 IT 轉變得很快,要常常留意市場的變化,面對大陸的競爭,香港的 IT 方面的人才要更有市場觸覺,緊貼市塲走勢。因為其他地方的IT技術已經走得比以往更快。不進則退,就讓大家一起來交流、提昇IT的心得! Chowky 因為工作關係,所以一開始接觸的是visual basic, foxpro ( 這不代表我老 ) 之後是 .NET, MSSQL 和 Crystal Report. 由工作學到的project management, system analysis and design 以及 system testing, user acceptance tests and different documentations. 另外,由不同的freelance 方面學到dreamweaver, javascript, php, mysql. 後來興起CMS wave, Chowky 亦學會了Joomla! 以及常用的javascript framwork: jquery and mootool. 連deisgn 都要自己包辦,所以接觸了photoshop, illustrator, firework. 新的工作方面,要利用RIA -- Flex and AIR 方面的技術。所以緊接下來應該會多一點分享ria 方面的技術 Chowky 所說的未必是對的,但我深信我所說的是未來 IT Trend. 大家亦應抱著懷疑的態度去分析每一件事,未經思考不要輕易相信。

No Comments, Be The First!

Leave a Reply