<!DOCTYPE html>

<html>

<head>

<title>Crayon Animate</title>

<style type="text/css">

body {

    background-color: #747474;

}

.yam-don-button {

    width: 300px;

    margin-top: 100px!important;

}

.yam-don-button {

    position: relative;

    display: block;

    background: #fff;

    border: none;

    border-radius: 100px;

    box-shadow: 0 24px 50px -20px rgba(0,0,0,.5);

    margin: 15px auto 0;

    min-width: 250px;

    line-height: 60px;

    font-size: 24px;

    text-decoration: none;

    text-align: center;

    vertical-align: middle;

    color: #fff;

    white-space: wrap;

    z-index: 2;

    cursor: pointer;

}

.yam-don-heart {

    position: relative;

    vertical-align: top;

    z-index: 1;

    display: inline-block;

    margin-right: 15px;

    color: #fff;

    font-size: 33px;

    text-shadow: none;

}

.btn-sponsor-red .yam-don-heart:before {

    background: linear-gradient(90deg,#f36,#61c2f0,#f441a5,#ffeb3b,#f36);

    background-size: 500%;

    content: "";

    position: absolute;

    top: 15px;

    left: -3px;

    right: 0;

    bottom: 15px;

    z-index: -1;

    filter: blur(10px);

    animation: crayonAnimate 28s linear infinite;

}

.yam-don-button:before {

    display: block;

    background: linear-gradient(90deg,#f36,#61c2f0,#f441a5,#ffeb3b,#f36);

    background-size: 500%;

    border-radius: 100px;

    content: "";

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    z-index: -1;

    opacity: .8;

    filter: blur(10px);

    animation: crayonAnimate 28s linear infinite;

    transition: all .35s;

}

.btn-sponsor-blue:before {

    background: linear-gradient(90deg,#00a2e4,#a7cd6b,#00a2e4,#a7cd6b,#00a2e4);

    background-size: 500%;

}

.yam-don-button:hover:before {

    top: -8px;

    left: -8px;

    right: -8px;

    bottom: -8px;

    opacity: 1;

    animation: crayonAnimate 8s linear infinite;

}

@keyframes crayonAnimate {

    from {background-position:0}

    to {background-position:500%}

}

</style>

</head>

<body>

<a href="#" class="yam-don-button btn-sponsor-blue" target="_blank">

    <span class="yam-don-heart">♥</span>立即点赞

</a>

<a href="#" class="yam-don-button btn-sponsor-red" target="_blank">

    <span class="yam-don-heart">♥</span>立即点赞

</a>

</body>

</html>

CSS3 彩色渐变动效按钮的更多相关文章

  1. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  2. 前端必须收藏的CSS3动效库！！！

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

  3. 【总结】前端必须收藏的CSS3动效库！！！

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

  4. css3常用动效以及总结

    (迁移自旧博客2017 08 06) CSS3 文本效果: box-shadow:盒子阴影,可以给卡片添加提高美化效果.可广泛应用于内容展示页面. <div class="card&q ...

  5. 超多的CSS3圆角渐变网页按钮

    <!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...

  6. 从浏览器渲染层面解析css3动效优化原理

    引言 在h5开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题: 减少页面DOM操作,可以使用CSS实现的动效不多出一行js代码 使用绝对定位脱离让 ...

  7. 玩转HTML5移动页面(动效篇)

    原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...

  8. 玩转HTML5移动页面（动效篇）

    为一名前端,在拿到设计稿时你有两种选择: 快速输出静态页面 加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些 ...

  9. 转：玩转HTML5移动页面(动效篇)

    作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就 ...

随机推荐

  1. 解决/home磁盘空间不足问题

    最近在Linux下做仿真实验,但是渐渐的发现,/home原来分配的空间不足.通过先建硬盘分区,然后挂载到/home文件的方法,在网上查了好多资料 建立分区并挂载分区http://www.se126.c ...

  2. Android学习：导入工程时报错The import android cannot be resolved

    今天在导入别人的工程时,出现了一个这个问题The import android cannot be resolved 就是找不到import android.support.v7.app.Action ...

  3. WPF动画之后属性值无法改变

    原文:WPF动画之后属性值无法改变         前一段时间使用WPF写2048游戏的时候,遇到下面的情形:使用按键对色块进行移动时,触发位置左边X和Y属性的DoubleAnimation动画,但是 ...

  4. python 自动登录网页

    语言:python 浏览器:chrome 工具:chrome控制台 #!/usr/bin/python # coding: GBK import urllib,urllib2,httplib,cook ...

  5. js中字符串拼接html

    1.使用转义字符 ": " " "+userName+" " " 效果:"userName" 2. 单引号中拼 ...

  6. 从外网站点获取的html去除换行回车制表位\n\r\t

    StringStr.Replace("\\r", "").Replace("\\n", "").Replace(&quo ...

  7. SpringBoot-provider-JPA Not a managed type 问题分析及解决办法

    spring boot jpa-java.lang.IllegalArgumentException: Not a managed type异常问题解决方法 JPA实体类没有被扫描到,导致这样的情况有 ...

  8. Asp.net MVC中如何获取控制器的名称

    如果在代码中 当前controller.action的获取RouteData.Route.GetRouteData(this.HttpContext).Values["controller& ...

  9. codedecision P1113 同颜色询问 题解 线段树动态开点

    题目描述:https://www.cnblogs.com/problems/p/11789930.html 题目链接:http://codedecision.com/problem/1113 这道题目 ...

  10. java NIO之HelloWorld

    Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的Java IO API,以便提高传输速度.但实际上,在最新的JDK中旧的I/0包已经使用NIO重新 ...