CSS按钮怎么做？

html-css013

CSS按钮怎么做？,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

.box {

width: 100pxheight: 100px position: relative

}

.box a {

width: 100pxheight: 100pxdisplay: blockposition: absolutetop: 0left:0background: #ffffilter:alpha(opacity=0)/* IE */ opacity:0)/* FF */

}

.box a:hover {

width: 100pxheight: 100pxdisplay: blockbackground: url(111.jpg) no-repeat center centerfilter:alpha(opacity=100)opacity:1

}

</style>

</head>

<body>

<div class="box"><img src="contact_us.jpg" width="100" height="100" /><a href="http://www.baidu.com"></a></div>

</body>

</html>

--------------------- ps ----------------------

图片你自己可以找2张，路径应该也不用我说了吧。img 是你的新闻图片，background是你的那个按钮图。你要用的效果涉及到鼠标滑动，CSS的话就是hover，但是A标签里面没有内容的情况下在IE下面是不能点击的，所以用到了background:#fff然后用滤镜效果让它透明。希望我的答案能让你满意，如果还有疑问可以发消息给我。 这个方法我测试过了的。

给按钮添加css样式的方法：

添加方法：

1、.btn {BORDER-RIGHT: #7b9ebd 1px solid右边线

2、PADDING-RIGHT: 2px内边距 右

3、BORDER-TOP: #7b9ebd 1px solid上边线

4、PADDING-LEFT: 2px内边距 左

5、FONT-SIZE: 12px文字大小

6、BORDER-LEFT: #7b9ebd 1px solid左边线

7、CURSOR: hand鼠标移上去时，变成手形。

8、COLOR: black颜色黑 （表示文字颜色）

9、PADDING-TOP: 2px内边距 上

10、BORDER-BOTTOM: #7b9ebd 1px solid }底边线

扩展资料

CSS样式部分

大小 {font-size: 12px}，x-large(特大) xx-small(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {font-style: oblique}(偏斜体) italic(斜体) normal(正常)

行高 {line-height: normal}(正常) 单位：PX、PD、EM

粗细 {font-weight: bold}(粗体) lighter(细体) normal(正常)

变体 {font-variant: small-caps}(小型大写字母) normal(正常)

大小写 {text-transform: capitalize}(首字母大写) uppercase(大写) lowercase(小写) none(无)

修饰 {text-decoration: underline}(下划线) overline(上划线) line-through(删除线) blink(闪烁)

常用字体： (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性： (background)

色彩 {background-color: #FFFFFF}

图片 {background-image: url()}

重复 {background-repeat: no-repeat}

滚动 {background-attachment: fixed}(固定) scroll(滚动)

位置 {background-position: left}(水平) top(垂直)

字间距 {letter-spacing: normal} 数值 /*这个属性有用，多实践下*/

对齐 {text-align: justify}(两端对齐) left(左对齐) right(右对齐) center(居中)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>title>

<style type="text/css">

.box {

width: 100pxheight: 100pxposition: relative

}

.box a {

width: 100pxheight: 100pxdisplay: blockposition: absolutetop: 0left:0background: #ffffilter:alpha(opacity=0)/* IE */ opacity:0)/* FF */ 

}

.box a:hover {

width: 100pxheight: 100pxdisplay: blockbackground: url(111.jpg) no-repeat center centerfilter:alpha(opacity=100)opacity:1

}

CSS3代码

随着HTML5/CSS3技术日趋成熟，现如今被越来越多的网站广泛的运用。模板之家代码频道为大家收集整理最新的CSS3按钮代码，CSS3菜单代码，CSS3特效代码等供大家学习交流，好的代码是学习进步的基石同时也可以在项目中得以运用。