<!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>
<title>CSS3实现的立体button</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}
a{background-color:#DB5705;border-radius:8px 8px 8px 8px;box-shadow:0 9px 0 #DB1F05,0 9px 25px rgba(0,0,0,0.7);color:#FFFFFF;display:block;font-family:'微软雅黑';font-size:42px;font-weight:700;margin:100px auto;padding:4px;position:relative;text-align:center;text-decoration:none;transition:all 0.1s ease 0s;width:260px;}
a:active{box-shadow:0 3px 0 #DB1F05,0 3px 6px rgba(0,0,0,0.9);position:relative;top:6px;}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<a href="#">前端project师</a>
</body>
</html>

CSS3实现的立体button相关推荐

  1. html好看的渐变效果,CSS3实现渐变/立体/扁平的漂亮按钮

    网页UI设计追求精美漂亮,除此之外,实现代码也越趋于简单易用.本文就介绍如何用CSS3实现渐变/立体/扁平的漂亮按钮,代码简单易用,但是效果却是十分之好. CSS3实现渐变/立体/扁平的漂亮按钮 按钮 ...

  2. 利用css3实现3d立体特效--正方体

    其实css3中提供了很多让我们实现非常炫酷的工具,好多特效不需要通过复杂的js代码来实现,而可以通过简单的css3代码来实现,这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现. 要实现这个正当 ...

  3. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 1 /*样式css*/ 2 3 .nav-menu li { 4 display: inline; 5 } 6 .nav-menu li a { 7 co ...

  4. CSS3实现3D立体效果

    CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...

  5. html如何实现立体效果,CSS3实现3D立体效果

    CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...

  6. 前端css3实现 3D立体盒子动画

    HTML代码 <!--外层立方体--> <div id="parent"><div></div><div></di ...

  7. css3设计动态立体盒子,【CSS3练习】3D盒子制作

    先发个3D盒子最终效果图 制作步骤1:创建基本结构 分布把6个面定义到3×3的画布上,1和4暂且是重叠的. html结构比较简单: 1 2 3 4 5 6 CSS部分: *{margin:0;padd ...

  8. css3制作3D立体模型

    代码跟注释都在里面了!想知道是什么效果不妨自己试试! <!DOCTYPE html> <html><head><meta charset="UTF- ...

  9. 【转载】无需图片，使用CSS3实现圆角按钮

    原文地址:http://www.open-open.com/home/space-37924-do-blog-id-5789.html 首先来看看效果: 事例HTML代码: <a href=&q ...

  10. HTML5 与 CSS3 jQuery部分知识总结

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

最新文章

  1. 追番必备，动漫角色也可以用人脸识别了
  2. Android sqlite 数据库保存Date 类型
  3. FPGA中实现对数运算
  4. metasploit 中 exploit模块check方法简介
  5. yaml 文件格式简介
  6. python 进程理论基础
  7. [Oracle]如何查看一个数据文件是否是自动扩展
  8. 2010年初的一点随想
  9. linux不停机释放日志,Kafka在线修改topic日志保存时长(不停机，不重启)
  10. Java删除服务器上的文件
  11. wifi芯片型号厂家简介
  12. 中标麒麟操作系统yum源配置
  13. windows系统设置保护视力方法
  14. 携创教育：自考英语二相当于什么水平？可以不考吗？
  15. 大学生生涯规划1000字计算机专业,计算机大学生职业生涯规划书1000字
  16. ERNIE-Enhanced Language Representation with Informative Entities 阅读笔记
  17. xml中使用 报错：XML Parser Error on line 35: 在实体引用中, 实体名称必须紧跟在 ‘‘ 后面。
  18. 掌财社:Springboot如何添加支付接口？实例过程详解
  19. 机器学习算法系列（一）- 感知器学习算法（PLA）
  20. Java网络爬虫--一步步使用Java网络爬虫技术实现豆瓣读书Top250数据的爬取，并插入数据库

热门文章

  1. Atitit 贝叶斯算法的原理以及垃圾邮件分类的原理
  2. Atitit. Atiposter 发帖机版本历史 编年史
  3. Atitit.提升软件稳定性---基于数据库实现的持久化 循环队列 环形队列
  4. paip.silverlight设计器载入异常NullReferenceException问题。
  5. Python : Arrow、Pyarrow库、以及与Julia互读
  6. 【原创】无冕之王 Julian Robertson旗下小虎群总规模2500亿美金
  7. (转)投资AI的核心标准是场景和数据
  8. 机器学习 --- 2. 从最大似然再看线性回归（转）
  9. 【诚邀】ZStack新品战略发布会4月16号如约开启
  10. Java画韦恩图_R绘制韦恩图 | Venn图