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 ...
随机推荐
- Contest Hunter #46 T1 磁力块 [分块]
描述 在一片广袤无垠的原野上,散落着N块磁石.每个磁石的性质可以用一个五元组(x,y,m,p,r)描述,其中x,y表示其坐标,m是磁石的质量,p是磁力,r是吸引半径.若磁石A与磁石B的距离不大于磁石A ...
- AtCoder Regular Contest 095E - Symmetric Grid
$n \leq 12,m \leq 12$,$n$行$m$列小写字母,现可做无数次操作:交换两行:交换两列.问是否有可能把他变成中心对称的. 没有去想分组枚举的复杂度QAQ 行和列的操作顺序是随意的. ...
- ftrace简介
ftrace 的作用是帮助开发人员了解 Linux 内核的运行时行为,以便进行故障调试或性能分析. 最早 ftrace 是一个 function tracer,仅能够记录内核的函数调用流程.如今 ft ...
- Day 11 正则表达式
正则表达式 一.简介 Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配到的行打印出来.grep全称是Globally search for a Regular ...
- Tomcat 7 的domain域名配置，Tomcat 修改JSESSIONID
https://blog.csdn.net/catoop/article/details/64581325
- rsync同步文件
rsync中的参数 -r 是递归 -l 是链接文件,意思是拷贝链接文件:-p 表示保持文件原有权限:-t 保持文件原有时间:-g 保持文件原有用户组:-o 保持文件原有属主:-D 相当于块设备文件: ...
- H5页面基于iScroll.js插件实现下拉刷新，上拉加载更多
前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...
- [Bzoj1112][POI2008]砖块Klo（splay）
1112: [POI2008]砖块Klo Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2353 Solved: 831[Submit][Statu ...
- Nginx常用命令（启动/重启/停止/测试配置文件/重新加载配置文件）
Nginx 安装后只有一个程序文件,本身并不提供各种管理程序,它是使用参数和系统信号机制对 Nginx 进程本身进行控制的. Nginx 的参数包括有如下几个: 使用: /usr/local/ngin ...
- Android新手入门2016（7）--布局
布局,这个在服务端变成是没有的,也是服务端的人学习client的一道坎吧. 曾经用cocos2d-x写小游戏的时候就是这个非常难懂,或者能用,可是理解不多的话,非常难写出好的布局,难以适合商业化的应用 ...