<!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. UI标签库专题九：JEECG智能开发平台 Choose(选则操作标签)

     1. Choose(选则操作标签) 1.1. 參数 属性名 类型 描写叙述 是否必须 默认值 hiddenName string 隐藏域的ID 否 null hiddenid string 隐藏 ...

  2. hdu 5375 - Gray code（dp) 解题报告

    Gray code Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total ...

  3. LeetCode102 Binary Tree Level Order Traversal Java

    题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...

  4. spring set注入

    上篇文章说到了构造器注入.可是有时候构造器注入并非非常好用,如今来看下set注入. 构造器注入博客地址:http://blog.csdn.net/luckey_zh/article/details/4 ...

  5. .Net接口调试与案例

    1.通过查看日志,可以看出问题的原因. 2.断点调试. 3.本地测试,确保无误后,线上测试. 4.输出测试. 通过get的方式,测试接口. // [HttpPost] public ActionRes ...

  6. Looksery Cup 2015 Editorial

    下面是题解,做的不好.下一步的目标是rating涨到 1800,没打过几次cf A. Face Detection Author: Monyura One should iterate through ...

  7. go语言的一个gui 开源 项目 https://github.com/andlabs/ui

    go语言的一个gui 开源 项目  https://github.com/andlabs/ui 1 安装  mingw-w64  链接地址: http://mingw-w64.sourceforge. ...

  8. Index was out of range

    Index was out of range. Must be non-negative and less than the size of the collection. Parameter nam ...

  9. DM9000C网卡驱动

    目的:通过学习,掌握如何移植.编写DM9000C网卡驱动 一.概述: DM9000是一款高度集成低功耗快速以太网处理器,该芯片集成了MAC和PHY.DM9000可以和CPU直接连接,支持8位.16位和 ...

  10. python 内存中写入文件(read读取不到文件解决)

    from io import StringIO a = StringIO.StringIO('title') a.write('content1\n') a.write('content2') a.s ...