如何用HTML实现简单按钮样式

互联网 18-11-10
本篇文章主要给大家介绍如何用HTML实现简单的按钮样式。

在网页设计过程中，按钮的设置可以说是最为常见且基础的一项html/css知识技能。

推荐参考视频教程：《HTML教程》

button按钮样式代码示例如下：

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>button按钮样式</title>     <style>         .button1 {             -webkit-transition-duration: 0.4s;             transition-duration: 0.4s;             padding: 16px 32px;             text-align: center;             background-color: white;             color: black;             border: 2px solid #4CAF50;             border-radius:5px;         }         .button1:hover {             background-color: #4CAF50;             color: white;         }     </style> </head> <body> <button class="button1">Green</button> </body> </html>

效果如下图：

相关属性介绍：

transition-duration 属性规定完成过渡效果需要花费的时间，-webkit-transition-duration属性是为了兼容浏览器Safari。

text-align属性时规定元素中的文本的水平对齐方式，值为center表示文本水平居中。

border-radius 属性可以让您为元素添加圆角边框。

:hover 选择器用于选择鼠标指针浮动在上面的元素，简单的说就是当鼠标移动到指定元素上时设置新的样式。

相关标签介绍：

<button> 标签定义一个按钮。

这里我们在body中使用的是<button> 标签，当然我们也可以使用div：

<div class="button1">Green</div>

注意，当我们使用div时需要给这个div设置宽度width，那么效果如下：

本篇文章就是关于HTML制作简单的按钮样式，是非常简单的，希望对新手朋友们有一定的帮助！

以上就是如何用HTML实现简单按钮样式的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：
免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
标签： HTML简单按钮
上一篇：php获取远程图片并下载保存到本地的方法分析 下一篇：Div内容居中效果如何实现

相关资讯