您的位置：首页 > Web前端 > CSS

Creating CSS Buttons

2005-02-15 01:51 393 查看

Creating CSS Buttons

Working Demo:

a.but:link, a.but:visited
{
float: left;
margin: 2px 5px 2px 5px;
padding: 2px;
width: 100px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid black;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
background: #cccccc;
text-align: center;
text-decoration: none;
font: normal 10px Verdana;
color: black;
}

a.but:hover
{
background: #eeeeee;
}

a.but:active
{
border-bottom: 1px solid #eeeeee;
border-top: 1px solid black;
border-right: 1px solid #eeeeee;
border-left: 1px solid black;
}

Button 1 Button 2 Button 3

The Cascading Style Sheet (CSS) definition provides several so-called "pseudo-classes". These are classes that modify all occurences of a given style definition.

They take the form:

Select All Code selector:pseudo-class {property: value}

Anchor tags have four pseudo-classes:

1) link
2) visited
3) hover
4) active

The only one that perhaps needs further explanation is "active". It refers to a link in the process of being clicked. The mouse is "down", but hasn't yet been released.

By setting the background, spacing, and border properties of these pseudo-classes, you can make your hyperlinks look and behave like buttons.

The code is below:

Select All Code <html>
<head>
<style type="text/css">
a:link, a:visited
{
float: left;
margin: 2px 5px 2px 5px;
padding: 2px;
width: 100px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid black;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
background: #cccccc;
text-align: center;
text-decoration: none;
font: normal 10px Verdana;
color: black;
}

a:hover
{
background: #eeeeee;
}

a:active
{
border-bottom: 1px solid #eeeeee;
border-top: 1px solid black;
border-right: 1px solid #eeeeee;
border-left: 1px solid black;
}
</style>
</head>
<body>
<a href="#">Button 1</a><a href="#">Button 2</a><a href="#">Button 3</a>
</body>
</html>

Note: I defined a:link and a:visisted to share a style definition, because buttons don't change their appearance when they've been "visisted".

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航