登录  /  注册

html button标签的样式怎么设置?html button标签的样式介绍

寻∝梦
发布: 2018-09-03 17:12:39
原创
21967人浏览过

本篇文章主要的介绍了关于html button标签的样式设置,还有关于html button标签的美化样式介绍,接下来就让我们一起来阅读本篇文章吧

首先我们先介绍HTML中的button标签的样式设置:

普通按钮设置:

把input元素的type属性设置为“button”,可以创建普通按钮。按钮上显示的文本是value属性的值,如果没有提供value属性,则只创建一个空按钮。如:

<input type="button" value="立即购买">
登录后复制

tuyi.png

效果很明显,这是默认普通按钮的设置。

默认情况下,在普通按钮上点击,是没有任何反应的。因此,需要为普通按钮注册事件,并手动编写相应的处理函数。假如希望单击上述按钮时,提交表单,则要为按钮注册onClick 事件。如:

<form name="buy" action="form.html" method="post">
    <button onClick="submitForm(buy)">立即购买</button>
</form>
登录后复制

现在点击按钮,就会触发onClick事件,并调用事件处理函数submitForm(buy),参数buy为待处理表单name属性的值。如果希望点击按钮后提交表单,就可以在事件处理函数中调用form对象的submit()方法:

function submitForm(f) {
    f.submit();  
}
登录后复制

这是一个默认情况的设置,现在我们来看看给html button标签设置样式:

给大家看一个完整的代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="div">Button</div>
</body>
</html>
登录后复制

这个的效果如图:

tuer.png

这个的效果是不是很明显,比默认的时候好看多了,等到我们学到js的时候,我们还能用js的技术把这默认的按钮设置的更加美观。

好了,以上就是关于html button标签的样式设置,还有美化样式的总结(想学更多就来PHP中文网),有问题的可以在下方提问。

【小编推荐】

html下拉菜单怎么做?html下拉菜单的代码实例介绍

html单选按钮默认选中怎么做?input标签的单选按钮用法实例

以上就是html button标签的样式怎么设置?html button标签的样式介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号