CSS3按钮效果制作

首先附上效果图，按下去有一种下沉的效果，

未按效果

按下去效果

原理：第一个按钮相对比较简单，就直接是一个双重阴影效果，然后鼠标按下去让他的margin-top值为-3px，阴影效果减小一点，就会有一种下沉的效果

　　　第二个按钮，相比第一个按钮，多了一个伪类，就是按钮上的一个小圆点，当按钮按下去时，小圆点的内阴影和外阴影的颜色调换一下，外阴影增加一个2px下部阴影，其他的和第一个按钮一样。

<style>

    /*初始化样式*/

    *{margin: 0;padding: 0;}

    .box{padding: 10px;box-sizing: border-box;overflow: hidden;width: 800px;overflow: hidden;margin: auto;height: 50px;}

    a{color: #000;font-size: 14px;font-family: 'Open Sans', sans-serif;text-decoration: none;display: inline-block}

    /*按钮一*/

    .btn1{padding:0 10px 0 10px;

        line-height: 30px;

        background:orange;

        border-radius: 5px;

        box-shadow: 0 5px 0 gray,1px 6px 6px gray;

    }

    .btn1:active{margin-top: 3px;

        box-shadow: 0 2px 0 gray,1px 3px 3px gray;

    }

    /*按钮二*/

    .btn2{padding:0 10px 0 10px;

        line-height: 30px;

        background:orange;

        border-radius: 5px;

        box-shadow: 0 5px 0 gray,1px 6px 6px gray;

        position: relative;

    }

    .btn2:after{

        content: '';

        position: absolute;

        height: 17px;

        width: 17px;

        border-radius: 50%;

        top: 50%;

        margin-top: -8.5px;

        right: 5px;

        box-shadow:  inset 0px 1px 0px gray, 0px 1px 0px #fff;

        background: #ffc100;

    }

    .btn2:active::after{

        box-shadow: inset 0px 1px 0px #fff, 0px 1px 0px gray,-1px 3px 0 gray;

    }

    .btn2:active{

        margin-top: 3px;

        box-shadow: 0 2px 0 gray,1px 3px 3px gray;

    }

</style>
<body>

    <!--按钮一-->

    <div class="box">

        <a class="btn1" href="#">Click me!</a>

    </div>

    <!--按钮二-->

    <div class="box">

        <a href="#" class="btn2">Click me!&nbsp;&nbsp;&nbsp;&nbsp;</a>

    </div>

</body>

CSS3按钮效果制作的更多相关文章

  1. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  2. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  3. 20个漂亮 CSS3 按钮效果及优秀的制作教程

    在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...

  4. CSS3 Drop-Shadows效果制作教程分享

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 Drop-Shadow效果,其实就是大家熟 ...

  5. CSS3按钮效果

    来自codepen,http://codepen.io/PalashSharma20/pen/YWBAgN 知识点:屏幕居中.transform.transition.transition-delay ...

  6. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  7. 基础理解2:CSS3按钮动画

    一个Css3按钮效果很好,仔细看了一下发现就是::after,::before然后加上transition,transform等效果实现,主要关注一下几点就能轻松实现: 1.伪类需要position定 ...

  8. 使用 CSS3 制作一组超时尚的动画按钮效果

    通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

  9. 超漂亮的CSS3按钮制作教程分享

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 利用CSS3属性制作按钮,我们只需要用到G ...

随机推荐

  1. SpringSide4 maven

    假设已经安装完 maven  eclipse也装了maven插件 现在要运行springside4 demo 1)下载 SpringSide4 http://www.springside.org.cn ...

  2. Linux4_文件操作

    以下操作都是在终端命令行: 1 apt-get install   应用名称,(---:apt-get是从Ubuntu的软件应用里自动下载) 如果你不知道下载,随便输入:java,javac,tree ...

  3. flex hack 记录

    IE从IE10开始. //共通 display: flex; flex-direction: column; align-items: flex-start;justify-content: cent ...

  4. <mark>元素----黄色背景

     当需要引用其他人的内容,或者想要重点标注一段文本时可以使用<mark>元素.这样浏览器会给<mark>中的文本添加黄色背景. 效果图如下:原文:HTML5 - 使用<m ...

  5. PIL+百度aip

    1.PIL模块安装 选择PIL 官方没有支持python3.6的PIL库,所以用pillow代替 http://www.lfd.uci.edu/~gohlke/pythonlibs/#pillow 链 ...

  6. 不使用库函数，编写函数int strcmp(char *source, char *dest) 相等返回0，不等返回-1；

    答案:一. int strcmp(char  *source, char *dest) { /* assert的作用是现计算表达式 expression ,如果其值为假(即为0),那么它先向stder ...

  7. Zookeeper数据与存储

    一.前言 前面分析了Zookeeper对请求的处理,本篇博文接着分析Zookeeper中如何对底层数据进行存储,数据存储被分为内存数据存储于磁盘数据存储. 二.数据与存储 2.1 内存数据 Zooke ...

  8. 九度OJ 1188：约瑟夫环 （约瑟夫环）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1891 解决:817 题目描述: N个人围成一圈顺序编号,从1号开始按1.2.3......顺序报数,报p者退出圈外,其余的人再从1.2.3 ...

  9. springboot错误页面处理

    springboot作为微服务的便捷框架,在错误页面处理上也有了一些新的处理,不同于之前的pringmvc500的页面处理是比较简单的,用java config或者xml的形式,定义如下的Bean即可 ...

  10. [note]高精度模板

    高精度模板 先定义一个struct struct gj{ int l,s[N]; bool fh; void Print(){ if(fh)putchar('-'); for(int i=l;i> ...