好看的按钮动画

准备一张透明图

实现效果

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Animated Bubble Buttons | Tutorialzine Demo</title>

<link rel="stylesheet" type="text/css" href="css/page.css" />
<link rel="stylesheet" type="text/css" href="buttons/buttons.css" />

</head>

<body>

<div id="buttonContainer">

    <a href="#" class="button big blue">Big Button</a>

</div>
<div style="margin:20px auto"><a href="#" class="button2">Big Button</a> </div>

</body>
</html>

CSS样式

.button{
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);
    text-decoration:none !important;
    white-space:nowrap;
    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;
    background-repeat:no-repeat;
    background-position:bottom left;
    background-image:url(‘button_bg.png‘);
    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s;
}
.button:hover{
    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
}
.button.big{ font-size:30px;}
.blue.button{
    color:#0f4b6d !important;
    border:1px solid #84acc3 !important;
    background-color: #48b5f2;
    background-image:url(‘button_bg.png‘), url(‘button_bg.png‘),
                    -moz-radial-gradient(    center bottom, circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
                    -moz-linear-gradient(#4fbbf7, #3faeeb);

    background-image:url(‘button_bg.png‘), url(‘button_bg.png‘),
                    -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
                    -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover{
    background-color:#63c7fe;
    background-image:url(‘button_bg.png‘), url(‘button_bg.png‘),
                    -moz-radial-gradient(    center bottom, circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
                    -moz-linear-gradient(#63c7fe, #58bef7);
    background-image:url(‘button_bg.png‘), url(‘button_bg.png‘),
                    -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
                    -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
时间: 2024-10-11 17:24:54

好看的按钮动画的相关文章

常用的css3鼠标悬停按钮动画特效

css3 按钮制作A标签属性hover css3带冒泡动画按钮 css3动画transform属性鼠标悬停图文列表动画效果 div CSS3动画带有的按钮_css3样式表属性动画按钮 创意CSS3属性鼠标悬停动画菜单 css3按钮动画特效大全鼠标滑过按钮动画特效 div css3 transition属性制作鼠标悬停图标导航菜单动画展示 21种css3 transition属性鼠标悬停导航条动画效果 纯div css3鼠标触碰图标背景渐变动画效果代码 css3动画鼠标滑过栏目图片滑动切换效果 c

Unity之UGUI初探—按钮动画

今天试了一下unity的新的UI系统—UGUI,感觉很强大,很多功能一目了然,使用起来相当方便接下来就是先试试使用他的动画吧 先创建一个UGUI的按钮,当然也可以先创建画布,然后在画布上创建按钮 然后点击按钮, 图中的transition的选项点开之后,有一项Animation的选项, 点击之后选择Auto Generate Animation 之后会弹出文件夹选项,就会意思是新建的这个动画的保存路径,自己选择路径命名即可,但要在Assets文件夹下 之后在window下,可以选择Animati

按钮动画

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>.button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text

8款超酷而实用的CSS3按钮动画

1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图标,并且在鼠标滑过这些按钮时,利用CSS3的动画特性出现滑动的动画效果. 在线演示 源码下载 2.HTML5/CSS3悬浮按钮特效 Canvas彩球飞舞效果 这次要分享一个非常具有动画色彩的CSS3按钮,按钮的外观比较一般,但它有两个特别的地方:一.按钮悬浮,整个按钮看上去像是悬浮在半空中一样,很立

5个基于css3超炫的鼠标滑动按钮动画

今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="wrap"> <a href="#" class="btn-slide"><span class=&q

简单的UIButton按钮动画效果ios源码下载

这个是简单的UIButton按钮动画效果案例,源码,简单的UIButton按钮动画,可以自定义button属性. 效果图: <ignore_js_op> 使用方法: 详细说明:http://ios.662p.com/thread-2272-1-1.html

Unity 图集 DoTween按钮动画

课程重点 项目资源的整理 制作账号系统的所有页面 完成页面的切换及数据传递 串接组件实现功能 账号系统页面及简单交互 课程知识点 资源整理 目录建立 资源目录 字体目录 预制体目录 场景预制体目录 UI预制体目录 UI图片切片目录 场景目录 脚本目录 第三方库目录 导入插件 把所有第三方库,移入ThirdParty中 搭建场景 建立Canvas 建立UICamera,去掉音频监听器 修改Canvas的渲染模式为相机模式,将UICamera拖给Canvas UI相机清除填充改为深度优先,渲染层改为

按钮动画控件----------WinForm控件开发系列

public partial class ButtonExt : Button { private AnimationTimer _Animation; /// <summary> /// 动画组件对象 /// </summary> [Description("动画组件对象")] [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)] public AnimationT

仿知乎FloatingActionButton浮动按钮动画效果实现(一)

最近刚接触使用android studio,那酸爽简直停不下来23333,eclipse什么的以后可以放弃了~ 然后在默认生成的第一个项目发现了一个新的控件,即FloatingActionButton,联想到知乎上也有这个控件,于是模仿知乎的效果试一试. 大概分为四个步骤: Step1:修改原生FloatingActionButton的背景颜色和点击颜色. Step2:描绘FloatingActionButton的点击动画效果. Step3:设置蒙版模拟点击以后的界面雾化效果. Step4:设置