用 CSS 让你的按钮(button)更加迷人

在这个科技繁荣的时代，我们借助HTML和CSS来构建一个引人注目的按钮。想象一下，你正在使用一个网页，一个设计精美的按钮吸引了你的目光，点击之间，它呈现出了不同的状态效果，这背后其实蕴含了丰富的代码设计。

我们用HTML来创建一个按钮的基本框架：

```html

按钮文字

```

这个简单的代码就定义了一个链接标签，其中的“按钮文字”就是按钮上显示的文字。

接下来，我们通过CSS来设置按钮的样式。这个按钮的背景、颜色、字体、大小等都可以通过CSS进行定制。例如：

```css

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;

}

```

我们还需要为按钮添加点击时的样式效果。例如，当按钮被点击时，它的背景颜色和文字颜色会发生变化：

```css

a.button:active {

background-position: bottom right;

color: 000;

outline: none; / hide dotted outline in Firefox /

}

```

在Internet Explorer浏览器下，点击按钮后按钮的状态无法恢复到默认状态。为了解决这个问题，我们需要在标签里添加一段代码：

```html

按钮文字

```

如果你希望这个按钮能用于提交表单，你可以在onclick事件里添加表单提交的语句。例如：`document.forms['theForm'].submit();`。这样，点击按钮就可以提交表单了。

通过HTML和CSS的结合，我们可以创建出功能丰富、视觉效果出色的按钮，提升用户体验。