2016 - 2024

感恩一路有你

使用CSS制作圆角按钮

浏览量:1745 时间:2024-01-15 07:19:01 作者:采采

在本篇教程中,我们将学习如何使用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制作圆角按钮的教程,是不是很简单呢?希望对大家有所帮助!

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。