<!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. js树状菜单

    html部分 <ul class="tree"> <li><span><a href="#">JavaScrip ...

  2. 利用 JavaScript SDK 部署网页版“Facebook 登录”

    facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...

  3. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十五章：第一人称摄像机和动态索引

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十五章:第一人称摄像机和动态索引 代码工程地址: https://g ...

  4. KiCad EDA 镜像目录说明

    KiCad EDA 镜像目录说明 stable/ -- 稳定版安装包. testing/ -- 测试安装包. nightly/ -- 每日编译安装包. 5.1 版本的每日编译包,这个文件夹是重点,如果 ...

  5. C++运行时类型识别

    通过运行时类型识别(RTTI),程序能够使用基类的指针或引用来检索这些指针或引用所指对象的实际派生类型. 通过下面两个操作符提供 RTTI: 1. typeid 操作符,返回指针或引用所指对象的实际类 ...

  6. @codeforces - 1149D@ Abandoning Roads

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 点 m 条边的无向连通图,每条边的边权为 a 或 ...

  7. JavaScript 错误

    try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. JavaScript 错误 当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错 ...

  8. SQL if语句简要

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

  9. CSS文本超过两行用省略号代替

    1.只显示一行,超出部分用省略号 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 2.只显示两行(或多行),超出部分用省 ...

  10. HZOJ 大佬(kat)

    及其水水水的假期望(然而我已经被期望吓怕了……). 数据范围及其沙雕导致丢掉5分…… 因为其实每天的期望是一样的,考虑分开. f[i][j]表示做k道题,难度最大为j的概率. 则f[i][j]=(f[ ...