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 ...
随机推荐
- 洛谷P2677 超级书架 2
题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎瞬间就被各种各样的书塞满了.现在,只有书架的顶上还留有一点空间. 所有N(1 <= N & ...
- BZOJ4725: [POI2017]Reprezentacje ró?nicowe
$n \leq 1e5$,$x \leq 1e9$. 1e9呵呵,暴力处理$a_n$的前几项直到1e9.然后处理出差的数列,每次在这里面找,找得到就回答,找不到,那有贡献的只有$a_i-a_{i-1} ...
- R语言入门--画图（一）--ggplot2
先写一些需要用到的知识点,比如包.函数 dplyr 很好用的包 经常与ggplot2连用 mutate:用于对数据框的列进行重新处理,或者用处理的结果添加新列 数据清洗: 1.na.omit() ...
- hdu 4857 逆拓扑+大根堆（priority_queue）
题意:排序输出:在先满足定约束条件下(如 3必需在1前面,7必需在4前面),在满足:1尽量前,其次考虑2,依次.....(即有次约束). 开始的时候,只用拓扑,然后每次在都可以选的时候,优先考虑小的, ...
- Elixir与编辑器安装
安装 Elixir 每个操作系统的安装说明可以在 elixir-lang.org 网站上 Installing Elixir 部分找到. 安装后你可以很轻松地确认所安装的版本. ~$:elixir - ...
- CAN 和 CANopen的区别和联系
1.CAN与CANopen的共同点与不同点: CAN只定义了物理层与链路层,而没有定义用户层,用户可根据自己的需要定义一些网络上的通信约定: CANopen是在CAN的基础上定义了用户层,即规定了 ...
- Leetcode 数组问题2：买卖股票的最佳时机 II
问题描述: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易( ...
- BZOJ1016最小生成树计数 最小生成树 + 排列组合
@[最小生成樹, 排列組合] Discription 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的 最小生成树.(如果两颗最小生成树中至少有一条边不 ...
- Linux下使用Shell命令控制任务Jobs执行（转）
一.下列命令可以用来操纵进程任务: ps列出系统中正在运行的进程. kill发送信号给一个或多个进程(经常用来杀死一个进程). jobs列出当前shell环境中已启动的任务状态,若未指定jobsid, ...
- tcp-time-wait-state
https://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux