使用CSS制作圆角按钮

2024-01-15

1745

在本篇教程中，我们将学习如何使用Dreamweaver来制作一个带有圆角和鼠标经过变色效果的按钮。下面我将分享给大家一些经验。新建HTML文件并插入链接首先，我们需要新建一个HTML文件，并在

在本篇教程中，我们将学习如何使用Dreamweaver来制作一个带有圆角和鼠标经过变色效果的按钮。下面我将分享给大家一些经验。

新建HTML文件并插入链接

首先，我们需要新建一个HTML文件，并在body标签中插入一个a标签，并设置空链接。

lt;a class"btn-style" href"#"gt;开始游戏lt;/agt;

然后，在title标签中引入内嵌样式表的代码。

lt;style type"text/css"gt;lt;/stylegt;

添加CSS样式

接下来，我们给a标签添加一个CSS样式，并命名为btn-style。我们可以定义按钮的宽度、高度、字体颜色、背景色以及去除下划线等属性。

.btn-style {
  width: 150px;
  height: 50px;
  color: #F8FF00;
  background: #FF0000;
  text-decoration: none;
  display: block;
}

注意，要加上display:block属性，否则定义的宽度和高度将不会生效。

最后，在a标签中引入btn-style样式。

lt;a class"btn-style" href"#"gt;开始游戏lt;/agt;

进一步样式设置

我们可以继续添加样式，使按钮文字水平居中、垂直居中，并定义字体和字体大小。

.btn-style {
  width: 150px;
  height: 50px;
  color: #F8FF00;
  background: #FF0000;
  text-decoration: none;
  display: block;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-family: "微软雅黑";
}

添加圆角效果

我们可以将按钮的四个角设置成圆角，使其更像一个按钮。

.btn-style {
  width: 150px;
  height: 50px;
  color: #F8FF00;
  background: #FF0000;
  text-decoration: none;
  display: block;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-family: "微软雅黑";
  border-radius: 100px;
}

鼠标经过效果

为了使按钮更加明显，我们可以在鼠标经过时改变按钮的颜色。我们可以单独给a标签定义鼠标经过后的颜色，将字体颜色从之前的黄色改为白色。

.btn-style:hover {
  color: #fff;
}

除了字体颜色，我们还可以改变按钮的背景色。

.btn-style:hover {
  color: #fff;
  background: #B00000;
}

调试和实时预览

为了方便观察效果，我们可以复制一个完全相同的按钮，并给两个按钮之间添加外边距。保存网页后，在浏览器中查看，当鼠标经过按钮时，按钮的颜色会改变，非常好看。

此外，在Dreamweaver中，我们还可以直接点击顶部工具栏中间的"拆分"按钮，以实时查看编辑后的效果。

以上就是使用Dreamweaver制作圆角按钮的教程，是不是很简单呢？希望对大家有所帮助！