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

html5作图片按钮

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

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. 如何固定fieldset中table 的位置
  2. JS 跟 CSS 的位置对其他资源加载顺序的影响(摘和总结)
  3. firefox扩展怎么取得采用lazyload技术的页面的所有图象名
  4. HTML表格标志教程(18):表格的表头<TH>
  5. 求鼠标移上去时.在下方出现表格内容代码.该怎么处理
  6. dreamweaver8代码颜色,该怎么处理
  7. 高效率HTML5代码开发最佳实践
  8. 韩顺平_轻巧搞定网页设计(html+css+javascript)_第31讲_this关键字详解_学习笔记_源代码图解_PPT文档整理
  9. css设置背景图片有关问题