小编给大家分享一下html中button标签的样式如何设置,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
本篇文章主要的介绍了关于HTML button标签的样式设置,还有关于HTML button标签的美化样式介绍,接下来就让我们一起来阅读本篇文章吧
首先我们先介绍HTML中的button标签的样式设置:
普通按钮设置:
把input元素的type属性设置为“button”,可以创建普通按钮。按钮上显示的文本是value属性的值,如果没有提供value属性,则只创建一个空按钮。如:
<input type="button" value="立即购买">
效果很明显,这是默认普通按钮的设置。
默认情况下,在普通按钮上点击,是没有任何反应的。因此,需要为普通按钮注册事件,并手动编写相应的处理函数。假如希望单击上述按钮时,提交表单,则要为按钮注册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>亿速云</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>
这个的效果如图:
这个的效果是不是很明显,比默认的时候好看多了,等到我们学到js的时候,我们还能用js的技术把这默认的按钮设置的更加美观。
看完了这篇文章,相信你对html中button标签的样式如何设置有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。