使用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制作圆角按钮的教程,是不是很简单呢?希望对大家有所帮助!
版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。