html5--6-47 阶段练习2-渐变按钮
html5--6-47 阶段练习2-渐变按钮
实例
@charset="UTF-8";
.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: orange;
background: linear-gradient(to left,orange, red);
} .but1:hover{
background: red;
background: linear-gradient(to right,orange, red);
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>6-47课堂演示</title>
<link rel="stylesheet" type="text/css" href="style.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>
学习要点
- 运用所学过的知识完成一个简单的小练习，加深对渐变的理解。
本案例仅是提供一个渐变在按钮中应用的思路，具体的按钮样式需要根据页面风格调整，并根据需要进一步美化添加其他样式
html5--6-47 阶段练习2-渐变按钮的更多相关文章
- html5 渐变按钮练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 一款纯css3实现的颜色渐变按钮
之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览 ...
- 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- HTML5 canvas createRadialGradient()放射状/圆形渐变
定义和用法 createLinearGradient() 方法创建放射状/圆形渐变对象. 渐变可用于填充矩形.圆形.线条.文本等等. 提示:请使用该对象作为 strokeStyle 或 fillSty ...
- Android 动态渐变按钮
先上个图 看着特别炫酷吧 其实就是自定义颜色两秒轮播动画 AnimationDrawable animationDrawable = (AnimationDrawable) button.getBac ...
- html5 canvas 奇怪的形状垂直渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 奇怪的形状水平渐变（因为大多数的之前的文章把基础都打过了，所以开始写的快了，如果有不明白的，可以回顾下之前的）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5和CSS3阶段，我是如何学习的？
经过一个月的学习,我收获了许多,今天的测验是做一个企业中文网站,令我自己感到吃惊的是,我前前后后用了4个小时就完成了,这在一个月前根本不可能,因为对布局属性的理解还不够深刻,常常会在调试中浪费大量时间 ...
- HTML5+CSS3系列教程——如何制作简单按钮笔记
1.按钮的制作方式 用图片(目前用的不多) 纯CSS a标签 input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮 butto ...
随机推荐
- 【BZOJ1500】维修数列（splay）
题意: 输入的第1 行包含两个数N 和M(M ≤20 000),N 表示初始时数列中数的个数,M表示要进行的操作数目.第2行包含N个数字,描述初始时的数列.以下M行,每行一条命令,格式参见问题描述中的 ...
- AtCoder Regular Contest 074F - Lotus Leaves
$n \leq 300,m \leq 300$,$n*m$的格子里有起点有终点有空地有障碍,人会从起点选一个同行或同列空地跳过去,然后一直这样跳到终点.求至少删掉多少格子使得人跳不到终点. 首先S和T ...
- 玩转css样式选择器----当父元素有多个子元素时选中第一个
- Delphi使用进行post数据时超时设置
因项目需要进行http的post提交数据,开始时用indy的idHttp组件,但是测试时发现当网络中断(如拔掉网线),idHttp的超时设置无效果,要等20秒才提示超时(参考网上的做法,将indy9升 ...
- codevs——1065 01字符串
1065 01字符串 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 输出仅有0和1组成的长度为n的字符串, ...
- json常见用法-loads、jumps、load、jump
这一篇博客的目的主要是想说明一个问题:干什么事情要抓住重点,不要力求完美,不要追求那种'大而全'的办事方式,因为时间是有限的,而客观事物(这里主要指技术方面的知识)是无限的,so,anyway! 1. ...
- 洛谷 P1034 矩形覆盖
P1034 矩形覆盖 题目描述 在平面上有nn个点(n \le 50n≤50),每个点用一对整数坐标表示.例如:当 n=4n=4 时,44个点的坐标分另为:p_1p1(1,11,1),p_2p2( ...
- pycharm索引index时间很长的原因
pycharm进行索引index的目的时代码自动补全,当引入新的插件时,就会增加索引时间,插件越多,索引时间越长 没有好的解决办法,除非增加硬件:或者不使用代码自动补全功能
- 【转】 nginx重定向规则详细介绍
rewrite命令 nginx的rewrite相当于apache的rewriterule(大多数情况下可以把原有apache的rewrite规则加上引号就可以直接使用),它可以用在server,loc ...
- BUPT复试专题—寻找第 K 小的数(2009)
题目描述 给你 n 个完全不相同整数(n<=300),每一个数都大于 0 并且小于 1000,请找出 第 k 小的数. 输入 输入包括两行,第一行用空格隔开的两个数 n 和 k;第二行有 n 个 ...