Dreamweaver如何用CSS制做圆角按钮?

Dreamweaver要想制做1个网页页面中的圆角按钮，并加上电脑鼠标历经时变色的实际效果，该如何制做呢？下面大家就看来看详尽的实例教程。

1、新建1个html文档，在body中先键入1个a标识，并插进1个空连接。【<a class="btn-style" href="#">刚开始手机游戏</a>】，随后在title中插进引进嵌入款式的编码【<style type="text/css"></style>】。

2、随后大家给a标识加上1个css款式，取名为【btn-style】，并界定按钮的宽、高、字体样式色调、情况色、去掉下划线。留意要再加disply:block，不然界定按钮的宽高都不容易起效。【width: 150px;height: 50px;color:#F8FF00;background: #FF0000;text-decoration:none;display: block;】随后在a标识中引进btn-style款式【class="btn-style"】。储存网页页面后按F12在访问器中查询，这时候大家发现字体样式小，并且沒有在按钮的正中间部位。

3、大家再次加上款式，给按钮界定字体样式水平垂直居中、竖直垂直居中、字体样式、字体样式尺寸。

line-height: 50px;text-align: center;font-size: 20px;font-family: "微软雅黑";

储存网页页面查询实际效果，按钮的基础模样就有了。

4、随后大家把按钮的4个角设定成圆角，看起来就更像按钮了。【border-radius: 100px;】。储存后查询实际效果，还能够把？

5、大家还能够把电脑鼠标历经按钮时转换下色调，这样按钮就较为显著了，大家能够独立给a标识界定1个电脑鼠标历经后的色调，把电脑鼠标历经后字体样式色调由以前的黄色变成白色【a:hover{color:#fff;}】

6、除界定电脑鼠标历经时字体样式色调，按钮情况色还可以变更1下。【background: #B00000;】。

7、以便便捷工作经验的盆友们观查实际效果，我特地拷贝了1个1模1样的按钮，并把两个按钮之间加了外间隔，并储存网页页面，在网页页面中可看到电脑鼠标历经下面按钮时电脑鼠标变色了，是否很好呢？

8、大家还可以在DW中立即点一下顶部正中间的【拆分】查询即时实际效果哦。是否很简易呢？

以上便是Dreamweaver制做电脑鼠标历经变色的圆角按钮的实例教程，期待大伙儿喜爱，请再次关心脚本制作之家。

有关强烈推荐：

Dreamweaver如何设计方案简易的导航栏按钮?

Dreamweaver中banner两边的按钮如何加上?

dreamweaver cs5如何给网页页面加上设定为首页的按钮?