html5 渐变按钮练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变按钮</title>
<link rel="stylesheet" href="style1.css" type="text/css">
</head>
<body>
<div>
<input type="button" value="渐变按钮" class="but1">
<input type="button" value="渐变按钮" class="but1 but2">
<input type="button" value="渐变按钮" class="but1 but2 but3">
</div>
</body>
</html>
.but1
{
padding: 10px 20px;
font-size: 16px;
text-shadow: 2px 2px 3px rgba(0,0,0,0.8)
}
.but2{
border-radius: 10px;
}
.but3{
border-radius: 20px;
}
.but1{
background: linear-gradient(to left,orange,red);
}
.but1:hover{
background: red;
background: linear-gradient(to right,orange,red);
}
html5 渐变按钮练习的更多相关文章
- 巧用HTML5给按钮背景设计不同的动画
如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3 animation 来动画 background-size 和 background-posit ...
- 一款纯css3实现的颜色渐变按钮
之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览 ...
- Android 动态渐变按钮
先上个图 看着特别炫酷吧 其实就是自定义颜色两秒轮播动画 AnimationDrawable animationDrawable = (AnimationDrawable) button.getBac ...
- html5——渐变
线性渐变 <style> div { width: 700px; height: 100px; /*方向:从右向左*/ /*起始颜色:黄色*/ /*终止颜色:绿色*/ background ...
- CSS3实现的渐变按钮，在IE7、IE6下的滤镜使用。
.ui-button { BORDER-LEFT-WIDTH:; ; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-T ...
- 自己动手画一个HTML5的按钮
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- html5: 幽灵按钮
html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- 一组简单好看的css3渐变按钮
主要代码如下: body { background:#fff } /* Mixins */ /* bg shortcodes */ .bg-gradient1 span,.bg-gradient1:b ...
- 超多的CSS3圆角渐变网页按钮
<!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...
随机推荐
- 关于FastReport在winform中的使用（包含FastReport.net的安装步骤链接）
一.FastReport的简介 FastReport是功能齐全的报表控件,使开发者可以快速并高效地为·NET/VCL/COM/ActiveX应用程序添加报表支持. 二.FastReport的安装(推荐 ...
- ProjectEuler && Rosecode && Mathmash做题记录
退役选手打发时间的PE计划 挂在这里主要是dalao们看到有什么想交流的东西可以私聊哦(站内信或邮箱吧) 2017/8/11 PE595 :第一题QAQ 2017/8/12 PE598 2017/ ...
- vue学习:vue+webpack的快速使用指南（新手向）
一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...
- [LeetCode] Search in a Sorted Array of Unknown Size 在未知大小的有序数组中搜索
Given an integer array sorted in ascending order, write a function to search target in nums. If tar ...
- Hadoop-2.9.2单机版安装（伪分布式模式）（一）
一.环境 硬件:虚拟机VMware.win7 操作系统:Centos-7 64位 主机名: hadoopServerOne 安装用户:root软件:jdk1.8.0_181.Hadoop-2.9.2 ...
- maven入门概念及使用
Maven 一.Maven概念 1.maven是什么:Maven 是一个项目管理工具.它负责管理项目开发过程中的几乎所有的东西. 版本.构建.输出物管理.依赖关系.文档和构建结果.项目关系.移植性管理 ...
- 执行发送邮件Send方法时，报错：邮箱不可用。 服务器响应为: 5.7.1 Unable to relay for xxx@xxx.com
.net代码在执行发送邮件Send方法时,往往出现这个的报错: 邮箱不可用. 服务器响应为: 5.7.1 Unable to relay for xxx@xxx.com 这个问题应该是smtp的设置问 ...
- ol图层支持的数据源
ol.source.BingMaps,必应地图的数据: ol.source.Cluster,聚族矢量数据: ol.source.ImageCanvas,数据来源是一个canvas元素,其中数据是图片: ...
- vue发送请求----vue-resource
使用插件vue-resource 官方提供的接口,在vue官网找不到 但在github中可以找到 安装:cnpm install vue-resource --save 第一步:注意要加--save, ...
- DjangoRestFramework 学习之restful规范 APIview 解析器组件 Postman等
DjangoRestFramework学习一之restful规范.APIview.解析器组件.Postman等 本节目录 一 预备知识 二 restful规范 三 DRF的APIView和解析器组件 ...