怎样在HTML中插入Button按钮,且按钮要显示颜色

首先插入内容：

<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的圆角化

参考资料：

mdn技术文档-button标签的介绍

1、首先打开hbuilder软件，新建几个默认的复选框。

2、然后在上方的style标签设置input的样式，先设置input的display属性为none，将默认的单选框去掉，在设置一下各个单选框的margin的距离。

3、接着在下方继续设置样式，设置label标签的before和after伪元素，将原有before的单选框选中状态的属性“checked+label”设置变为红色实心框，同时未选中的状态的“label::after”为白色空心方框。

4、最后打开浏览器，即可看到设置好的样式，其中被选中的是红色的实心方框，没被选择的则是没有颜色的方框。

如果是Dreamweaver自带的话就是:
先保存你的那个文档->在文档里菜单栏->插入记录->媒体->flash按钮->在样式里选择就好了
按钮文本是指按钮上面你想要的文字自己打上去就OK了~
若是Dreamweaver自带的你不喜欢还可以去下载素材啊~然后用热点链接就OK啦~若是想要这种的给我留言我再教你

首先用PHOTOSHOP做出你想要的样式的。具体代码，我就把我以前写的CSS样式表发给你看看，仅供参考。 btn1 {
height: 20px;
width: 60px;
background-image: url(img/searchjpg);
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}你只需要把背景更改成你的就可以了（需要注意文件和网页文件保存的位置）。

非IE6浏览器，可以使用input:hover的伪类来控制样式，但IE6浏览器只能用JS来实现了，需要设定两个状态，然后用JS切换类。

<style>
#c_button { width:92px; height:30px; border:0; float:left;}
c_up{background:url(/images/i_login_btnpng) no-repeat 0 top;}
c_down{background:url(/images/i_login_btnpng) no-repeat 0 bottom;}
</style>

<input name="" id="c_button" class="c_up" type="submit" value="" title="点击登录"/>

<script type="text/javascript">
documentgetElementById("c_button")onmouseover=function() {thisclassName = "c_down";}
documentgetElementById("c_button")onmouseout=function(){thisclassName = "c_up";}
</script>

引用（有人回答过了）：
btn
{
BORDER-RIGHT:
#7b9ebd
1px
solid;
PADDING-RIGHT:
2px;
BORDER-TOP:
#7b9ebd
1px
solid;
PADDING-LEFT:
2px;
FONT-SIZE:
12px;
BORDER-LEFT:
#7b9ebd
1px
solid;
CURSOR:
hand;
COLOR:
black;
PADDING-TOP:
2px;
BORDER-BOTTOM:
#7b9ebd
1px
solid
}
<button
class=btn
title="CSS样式按钮">CSS样式按钮</button>
以上是一个典型的CSS控制的按钮样式。我分别作一下简单的解释与说明：
btn
{
BORDER-RIGHT:
#7b9ebd
1px
solid;
右边线
PADDING-RIGHT:
2px;
内边距
右
BORDER-TOP:
#7b9ebd
1px
solid;
上边线
PADDING-LEFT:
2px;
内边距
左
FONT-SIZE:
12px;
文字大小
BORDER-LEFT:
#7b9ebd
1px
solid;
左边线
CURSOR:
hand;
鼠标移上去时，变成手形。
COLOR:
black;
颜色黑
（表示文字颜色）
PADDING-TOP:
2px;
内边距
上
BORDER-BOTTOM:
#7b9ebd
1px
solid
底边线
}

新手的话，按楼上说的用Blend做，非常快速方便。
自己写的话如下：
//Resources
<Style x:key="btnStyle" TargetType="Button"><!--这句的意思是指向Button的Style，资源的Key为btnStyle-->
<SetterTemplate><!--设置模板Template-->
<SetterValue><!--设置模板的值Value-->
<ControlTemplate TargetType="Button"><!--指向Button的模板-->
<!--这里写要做成按钮的形状，比如把一张图做成按钮，如下：-->
<Image Source=""/><!--source中写的路径-->
</ControlTemplate>
</SetterValue>
</SetterTemplate>
</Style>

//然后，在Xaml中：
<Button Style="{StaticResource btnStyle}"/><!--引用资源的Key：btnStyle-->

希望我的回答对你有所帮助。

---