1. 爱易网页
  2. HTML教程
  3. html5作图片按钮

html5作图片按钮

日期：2014-05-17　 浏览次数：20682 次

html5做图片按钮

?

<!DOCTYPE html>
<html>
<head>
<title>Just some other awesome CSS3 buttons - demo</title>
<meta charset="utf-8">
<style>
body
{
margin: 0;
text-align: center;
}
h2
{
font: bold 1.4em 'Lucida sans', 'Trebuchet MS', Tahoma, Arial;
color: #555;
}
.button
{
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));/****渐变 采用直线渐变 从左到顶，再到下****/
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;/*****边框的圆角设置****/
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);/**这个很重要 inset**/
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.button:hover
{
background-color: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}
.button:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) i

相关资料更多>

  1. js操作cssRule的增删节
  2. 网页制作高手进阶：浅谈设计中的文字
  3. 给HTML中的table框子设置细边框样式
  4. ibatis<[CDATA[]]> ,html table 列宽固定以及文本域有关问题
  5. 完整的HTML文件
  6. 页面之间怎么传递参数
  7. 网站式样之Base.CSS（已含Reset.Css）
  8. 求肋:固定表头第一列(两行合并),怎么解决重叠的有关问题
  9. HTML 五 的自定义 data- 属性和jquery的data()方法的使用