本篇文章主要的介绍了关于html button标签的样式设置，还有关于html button标签的美化样式介绍，接下来就让我们一起来阅读本篇文章吧
首先我们先介绍HTML中的button标签的样式设置：
普通按钮设置：
把input元素的type属性设置为“button”，可以创建普通按钮。按钮上显示的文本是value属性的值，如果没有提供value属性，则只创建一个空按钮。如：
登录后复制
立即学习“前端免费学习笔记（深入）”；
效果很明显，这是默认普通按钮的设置。
默认情况下，在普通按钮上点击，是没有任何反应的。因此，需要为普通按钮注册事件，并手动编写相应的处理函数。假如希望单击上述按钮时，提交表单，则要为按钮注册onClick 事件。如：
登录后复制
现在点击按钮，就会触发onClick事件，并调用事件处理函数submitForm(buy)，参数buy为待处理表单name属性的值。如果希望点击按钮后提交表单，就可以在事件处理函数中调用form对象的submit()方法：
function submitForm(f) { f.submit(); }
登录后复制
这是一个默认情况的设置，现在我们来看看给html button标签设置样式：
给大家看一个完整的代码实例：
nbsp;html>PHP中文网 .div { display: inline-block; padding: .3em .5em; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white inset; text-align: center; text-shadow: 0 1px 1px black; color:white; font-weight: bold;}.div:active{ box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset; border-color: rgba(0,0,0,.3); background: #bbb;}Button
登录后复制
这个的效果如图：
这个的效果是不是很明显，比默认的时候好看多了，等到我们学到js的时候，我们还能用js的技术把这默认的按钮设置的更加美观。
好了，以上就是关于html button标签的样式设置，还有美化样式的总结(想学更多就来PHP中文网)，有问题的可以在下方提问。
【小编推荐】
html下拉菜单怎么做？html下拉菜单的代码实例介绍
html单选按钮默认选中怎么做？input标签的单选按钮用法实例
以上就是html button标签的样式怎么设置？html button标签的样式介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2831583.html
