html,网页自定义button外形

发布网友发布时间：2022-04-24 05:21

共8个回答

懂视网时间：2022-04-20 13:41

本篇文章主要的介绍了关于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>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>

这个的效果如图：

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

好了，

热心网友时间：2022-04-20 10:49

表单元素（input,textarea,select,button等）都是可以自定义样式的。和普通的html标签一样，给他相应的class或id名称即可。

对于按钮类的美化，首先，你应该取出其border属性（假设你需要使用背景图片的画）。如：border:none;否则的话，你的按钮会像一个凸起的方块。

然后，你还需要给你的按钮一个块属性display:block;如果，同一行内有多个按钮，则给一个display:inline-block属性，然后设置其宽度、高度。

里面可以使用文字，也可以使用图片（background写入即可）。

如果使用图片，那么你可能需要把里面的文字隐藏，这就是display的作用。隐藏文字的写法通常是：text-indent:-300px;文字向左缩进，font-size:0px;字号缩小，overflow:hidden;超出隐藏。

聚焦效果，则可以使用js或jq的事件绑定来修正，如js：
onMouseover="this.className='hover'" 鼠标划过的时候给一个hover的名称
onMouseout="this.className=''"; 鼠标滑出的时候移除刚才添加的名称
css则对应起来：
#my_button button {}
#my_button button.hover,#my_button button:hover {}

热心网友时间：2022-04-20 12:07

.btn-comment {
    padding: 3px 5px;
    background: #13ACF8;
    color: #fff;
    border: 3px solid #6CD6FF;
    font-weight: bold;
    font-family: "微软雅黑", "Microsoft Yahei", "黑体", sans-serif;

不支持hover属性的IE6的话...为了互联网的未来还是不要去支持IE6了

如果一定要支持的话就用jquery吧，如下↓

$('.btn-comment').hover(function() { $(this).addClass('.active');});

这样的话就将上面css中的

.btn-comment:hover

改为↓

.btn-comment.active

即可

热心网友时间：2022-04-20 13:42

不会啊，这按钮用的图片才多大点儿，肯定不会明显影响打开速度啊。直接给这个按钮设置图片背景就好啊。最好用#id {}来设置样式。 js里面，用document.getElementById('id').style.background来控制背景。

热心网友时间：2022-04-20 15:33

按钮样子用背景图片来做，默认图片样式a,鼠标滑过图片样式b，input里加上下面这些
class="a" onmouseover="this.className='a'" onmouseout="this.className='b'"

热心网友时间：2022-04-20 17:41

你用 input button的话 hover 在IE6下是不可以，没有伪类，但是IE6下有a:hover 所以建议你用a 来做按钮 href 或者onclick都可以你可以看看css的bootstrap框架，应该都兼容，很多按钮的样式引用外部css和js之后只需要一个class即可很方便

热心网友时间：2022-04-20 20:06

这个用jquery 很简单。

热心网友时间：2022-04-20 22:47

覆盖原来的样式，自己写咯