网上有关“html按钮代码”话题很是火热，小编也是针对html按钮代码寻找了一些与之相关的一些信息进行分析，如果能碰巧解决你现在面临的问题，希望能够帮助到您。
首先插入内容：
<button type='button' class='btn-style'>点击</button>
css样式有两种，一种是定义一个class，命名为btn-style（此处定义为红色背景）
.btn-style{
background-color:red
}
另一种定义:直接在button标签上写内联样式，如下：
<button type='button' style='background-color:red'>点击</button>
效果如下，按钮红色背景：
代码截图如下：
扩展资料：
1、<button> 标签定义一个按钮。在 button 元素内部，您可以放置内容，比如文本或图像。
2、同样设置按钮其他样式，比如:
边框：border:1px solid #1054ff;//表示边框为1px，实体线，颜色为#1054ff
字体颜色：color:#1054ff;//表示字体颜色为#1054ff
按钮圆角设置：border-radius:4px;//表示按钮四个角有4px的圆角化
参考资料：
通过CSS可以实现多种按钮效果，比如通过CSS渐变属性可以设置颜色渐变的效果按钮，通过 box-shadow实现按下效果按钮等
今天在本篇文章中将分享如何制作几种不同样式的按钮效果，它们分别是平面，边框，渐变和阴影以及按下样式按钮。接下来在文章中将和大家详细介绍如何通过CSS代码来实现效果。
HTML代码
<div >
<button>平面按钮</button>
</div>基础的CSS样式代码
button{
display: inline-block;
margin: 0 10px 0 0;
padding: 15px 45px;
font-size:20px;
font-family:"Bitter",serif;
line-height: 20px;
appearance: none;
box-shadow:none;
border-radius: 0;
}（1）平面样式CSS按钮
平面样式按钮的使用现在非常流行，并且符合无处不在的平面设计趋势。，这些的平面样式按钮效果很好看。以下代码是按钮处于正常的情况下的状态
.pm button {
color:#fff;
background-color:#6496c8;
border:none;
}效果图：
（2）边框样式CSS按钮
边框样式按钮与平面按钮属于同一类。唯一的区别是，我们将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态
.pm button {
color:#444;
border:5px solid #6496c8;
background-color: #fff;
}效果图：
（3）渐变和阴影样式CSS按钮
这种渐变和阴影样式的按钮更加符合我们在过去的日子里所看到的按钮效果。如果你喜欢那些颜色多彩的那么渐变/阴影样式的按钮适合您。创建这款按钮的好处是它的效果全部由CSS完成，因此可以轻松的对其放大或缩小而不必担心会丢失分辨率，或者必须创建新图像。以下代码是按钮处于正常的情况下的状态
.pm button {
color:#fff;
text-align: center;
box-shadow:inset 0 0 0 1px #e91e637d;
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgb(244,103,34), rgb(197,29,124));
background: -moz-linear-gradient(right, rgb(244,103,34), rgb(197,29,124));
background: linear-gradient(to right, rgb(244,103,34) , rgb(197,29,124));}
}效果图：
（4）按样式CSS按钮
这些“按下”式按钮结合了一些平面设计和假象，让用户感觉他们实际上按下了按钮。当用户按下它时，它似乎陷入了页面。它的实现需要用到阴影来设置，使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态
.pm button {
color: #fff;
background-color: #6496c8;
border: none;
border-radius: 15px;
box-shadow: 0 10px #27496d;
}效果图：
总结：
关于“html按钮代码”这个话题的介绍，今天小编就给大家分享完了，如果对你有所帮助请保持对本站的关注！
本文来自作者[访客]投稿，不代表汇盛号立场，如若转载，请注明出处：http://hs59.cn/hs/339.html
评论列表（4条）
我是汇盛号的签约作者“访客”！
希望本篇文章《html按钮代码》能对你有所帮助！
本站[汇盛号]内容主要涵盖：生活百科,小常识,生活小窍门,知识分享
本文概览：网上有关“html按钮代码”话题很是火热，小编也是针对html按钮代码寻找了一些与之相关的一些信息进行分析，如果能碰巧解决你现在面临的问题，希望能够帮助到您。首先插入内容：&l...