<!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. android framework 01

    .(由下向上启动),Uboot引导内核(linux Kernel)启动,把内核从flash放到内存中,引导内核启动.内核是系统的核心,负责进程的管理内存的管理网络的管理.内核(Linux Kenel) ...

  2. 14.字符串hash寻找第一个只出现一次的字符

    //char 0-255一共256个 char getonebyhash(char *str) { if (str == NULL) { return '\0'; } char ch = '\0'; ...

  3. Node.js REPL(交互式解析器)

    Node.js REPL(交互式解释器) Node 自带了交互式解释器,可以执行以下任务: 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中. 执行 - 执行输入的数据结 ...

  4. HDU 4704 Sum 超大数幂取模

    很容易得出答案就是2^(n-1) 但是N暴大,所以不可以直接用幂取模,因为除法操作至少O(len)了,总时间会达到O(len*log(N)) 显然爆的一塌糊涂 套用FZU1759的模板+顺手写一个大数 ...

  5. RPC简易学习

    0.RPC简介 RPC,   英文全称:Remote Process Call.   中文全称:远程过程调用. 客户端通过网络请求调用远程服务端对外暴露服务.常用的两种RPC协议:TCP.HTTP. ...

  6. Spring3 整合MyBatis3 配置多数据源 动态选择SqlSessionFactory（转）

    1. Spring整合MyBatis切换SqlSessionFactory有两种方法,第一. 继承SqlSessionDaoSupport,重写获取SqlSessionFactory的方法.第二.继承 ...

  7. 最优子结构（Optimal Substructure）

    最优子结构的存在是应用动态规划的前提(或者说必要条件),由此可以避免重复计算: 1. 图算法 最短路径的子路径也一定是最短的: 简单地反证,如果最短路径的中间两点,之间的路径不是最短路径的话,那么一定 ...

  8. 用djbdns为域名解析服务护航

      上期回顾:http://chenguang.blog.51cto.com/350944/292195       650) this.width=650;" alt="&quo ...

  9. [React & Testing] Snapshot testings

    For example we have a React comonent: -- A toggle button, we want to test. When it si toggle on, the ...

  10. 安卓手机运行WINDOWS

    http://www.pcdiy.com.tw/detail/1974 我的ZenFone 2手机可以跑Windows啦! 就在台风来袭,有人正准备去泛舟的那天,国外的XDA论坛神人则是选择让自己的Z ...