<!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. pycahrm安装说明

    从官网下载http://www.jetbrains.com/pycharm/download/other.html(PS:现在需要翻墙可以直接用文件夹里的那个) 下载完成后双击文件 第二步:双击已下载 ...

  2. php 正则学习取反符号~

    php 正则学习取反符号~ ~(<a .*?>.*?</a>|<.*?>)~i 先看正则图形,有点偏差,但可以初步看出结果. 关于 ~ 是取反符号,看下面说明.

  3. Nginx 缓存代理

    访问ArcGIS官网的地图瓦片太慢.想到可用NIGIX代理. Nginx是Linux下http代理软件,Windows下也有. 以下为配置方法,注意红色部分. 1.需要在本地proxy_cache_p ...

  4. CAD专用卸载修复工具,一键完全彻底卸载删除CAD软件的专用卸载工具

    Autodesk CAD卸载工具(AUTO Uninstaller)是专门为了针对Autodesk CAD软件卸载不干净而导致CAD安装失败问题进行研发的Autodesk CAD一键卸载工具.现在虽然 ...

  5. 动态设置iframe高度

    <%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...

  6. oracle函数 ROW_NUMBER()

    [语法]ROW_NUMBER() OVER (PARTITION BY COL1 ORDER BY COL2) [功能]表示根据COL1分组,在分组内部根据 COL2排序,而这个值就表示每组内部排序后 ...

  7. 设计模式 - 工厂模式(factory pattern) 具体解释

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012515223/article/details/27081511 工厂模式(factory pa ...

  8. 洛谷P2504 [HAOI2006]聪明的猴子

    #include<bits/stdc++.h> using namespace std; ; ; int n,m,k,ans; double Max; int monkey[maxn]; ...

  9. NSOperation 详解

    原文地址:http://nshipster.com/nsoperation/ 大家都知道的秘密是一个应用程序,瞬间响应卸载计算在后台异步完成.因此,现代的Objective-C开发者有两种选择:大中央 ...

  10. PHP 手机短信验证码 laravel 实现流程

    https://blog.csdn.net/uknow0904/article/details/80336941 本人在自己博客(Laravel)的注册部分 使用手机号注册,需要发送短信验证码. 使用 ...