<!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. 重磅！容器集群监控利器 阿里云Prometheus 正式免费公测

    Prometheus 作为容器生态下集群监控的首选方案,是一套开源的系统监控报警框架.它启发于 Google 的 borgmon 监控系统,并于 2015 年正式发布.2016 年,Prometheu ...

  2. HTML之CSS标签

    1.CSS选择器 1).id选择器   2).class选择器 3).标签选择器   4).层级选择器(空格)    (1)id层级选择器       (2)class层级选择器 5).组合选择器(逗 ...

  3. 【C++】去除vector里重复元素的方法比较

    背景:构造一个无重复的白名单,之后要在里面进行二分查找.故要求名单有序,且无重复,并且要进行二分查找,所以要采用有:随机访问迭代器类型的容器.这类容器有vector,array,deque.显然要ve ...

  4. jQuery $.isNumeric vs. $.isNaN vs. isNaN

    在jQuery中,有几种方式可以判断一个对象是否是数字,或者可否转换为数字. 首先,jQuery.isNaN()在最新版本中已经被移除了(1.7之后),取而代之的是  jQuery.isNumeric ...

  5. python 六种典型的异常

  6. sql函数的使用——转换函数

    转换函数用于将数据类型从一种转为另外一种,在某些情况下,oracle server允许值的数据类型和实际的不一样,这时oracle server会隐含的转化数据类型,比如: create table ...

  7. @codeforces - 932F@ Escape Through Leaf

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 个点的树(标号1~n),以结点 1 为根.每个结点 ...

  8. SQL if语句简要

    if语句 可以作为表达式用 可以在存储过程中作为流程控制语句用 表达式 IF(条件,条件true,条件false) 示例 sex字段m,f 互换 update salary set sex = if( ...

  9. 从零学React Native之09可触摸组件

    可触摸组件有: TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback 1. Touc ...

  10. Oracle函数——COALESCE

    COALESCE 含义:COALESCE是一个函数, (expression_1, expression_2, ...,expression_n)依次参考各参数表达式,遇到非null值即停止并返回该值 ...