<!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. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  2. CSS3制作404立体字体

    CSS3制作404立体字体页面效果     鼠标移动上去,背景色变白.       动态效果:     .demo p:first-child span:hover { text-shadow:0px ...

  3. 纯CSS3实现超立体的3D图片侧翻倾斜效果

    看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图.那么接下来我们分析一下源码吧,显示html代码,非常简单: ...

  4. CSS3特效----制作立体导航栏菜单

    使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...

  5. CSS3去除手机浏览器button点击出现的高亮框

    在工作中常常遇到在手机浏览器中浏览网页时.点击页面中的button或者是具备点击事件的元素,就会出现一个默认的高亮框.影响总体的感官体验. 能够用一个简单的css3属性来解决:tap-highligh ...

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

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

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

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

  8. HTML5 与 CSS3 jQuery部分知识总结【转】

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

  9. 无需图片，使用CSS3实现圆角按钮[转]

    首先来看看效果:   事例HTML代码: <a href="#" class="button green">button</a> < ...

随机推荐

  1. JAVA多态学习1

    多态–概念 所谓多态.就是指一个引用(类型)在不同情况下的多种状态. 也能够理解成:多态是指通过指向父类的指针,来调用在不同子类中实现的方法. 实现多态有两种方式:1.继承.2.接口 这一次我们先来演 ...

  2. Mysql第八天 分区与分表

    分区表 主要提供例如以下的特性,或者适合如此场景: 数据量非常大, 或者仅仅有表中最后的部分有热点数据.其它均为历史数据 分区表数据更easy维护,能够对独立的分区删除等操作 分区表的数据能够分布在不 ...

  3. JAVA 并发编程-线程范围内共享变量（五）

    线程范围内共享变量要实现的效果为: 多个对象间共享同一线程内的变量 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsi ...

  4. C语言利用 void 类型指针实现面向对象类概念与抽象

    不使用C++时,很多C语言新手可能认为C语言缺乏了面向对象和抽象性,事实上,C语言通过某种组合方式,可以间接性的实现面对对象和抽象. 不过多态和继承这种实现,就有点小麻烦,但是依然可以实现. 核心: ...

  5. Scott Hanselman的问题-2

    .Net程序员面试 每个人都应知道篇 (回答Scott Hanselman的问题)   昨天回答了Scott Hanselman在他清单上关于C#那部分的题目,.Net 程序员面试 C# 语言篇 (回 ...

  6. java为什么要定义接口等相关解释

    1.接口的作用是实现多重继承  因为只能继承一个类(规定的) 2.一个类只能继承一个父类,但是可以实现一个或多个接口 3.abstract关键词能让你在类里创建一个或多个没有定义的方法—你给出接口,但 ...

  7. Android SecurityException

    public boolean checkNetwork() { boolean result = false; try { Context context = this.getApplicationC ...

  8. 玲珑学院 1050 - array

    1050 - array Time Limit:3s Memory Limit:64MByte Submissions:494Solved:155 DESCRIPTION 2 array is an ...

  9. 【Django】Form组件

    目录 Form组件介绍 常用字段与插件 Form组件中所有内置字段 从数据库中获取数据 校验示例 检验手机号是否合法 方式一(基本操作) 方式二(自定义验证规则) 方式三(利用钩子) 验证密码一致性 ...

  10. 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) B】 Conan and Agasa play a Card Game

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最大值出现次数是偶数. 那么就取次大值. 次大值也是偶数? =>再次 因为你绝对不能取偶数个的. 取了对方就总是能面对一个奇数 ...