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-渐变按钮的更多相关文章

  1. html5 渐变按钮练习

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

  3. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  4. HTML5 canvas createRadialGradient()放射状/圆形渐变

    定义和用法 createLinearGradient() 方法创建放射状/圆形渐变对象. 渐变可用于填充矩形.圆形.线条.文本等等. 提示:请使用该对象作为 strokeStyle 或 fillSty ...

  5. Android 动态渐变按钮

    先上个图 看着特别炫酷吧 其实就是自定义颜色两秒轮播动画 AnimationDrawable animationDrawable = (AnimationDrawable) button.getBac ...

  6. html5 canvas 奇怪的形状垂直渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. html5 canvas 奇怪的形状水平渐变（因为大多数的之前的文章把基础都打过了，所以开始写的快了，如果有不明白的，可以回顾下之前的）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML5和CSS3阶段，我是如何学习的？

    经过一个月的学习,我收获了许多,今天的测验是做一个企业中文网站,令我自己感到吃惊的是,我前前后后用了4个小时就完成了,这在一个月前根本不可能,因为对布局属性的理解还不够深刻,常常会在调试中浪费大量时间 ...

  9. HTML5+CSS3系列教程——如何制作简单按钮笔记

      1.按钮的制作方式 用图片(目前用的不多) 纯CSS a标签 input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮 butto ...

随机推荐

  1. 16.1113 模拟考试T1

    笔记[问题描述]给定一个长度为m的序列a,下标编号为1~m.序列的每个元素都是1~N的整数.定义序列的代价为累加(1->m-1 abs(ai+1-ai))你现在可以选择两个数x和y,并将序列?中 ...

  2. 【shell】shell编程（一）-入门

    如今,不会Linux的程序员都不意思说自己是程序员,而不会shell编程就不能说自己会Linux.说起来似乎shell编程很屌啊,然而不用担心,其实shell编程真的很简单.背景 什么是shell编程 ...

  3. centos7 搭建hadoop

    参考文档:http://blog.csdn.net/xiaoxiangzi222/article/details/52757168 https://waylau.com/centos-7-instal ...

  4. T1063 合并果子 codevs

    http://codevs.cn/problem/1063/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description 在一个 ...

  5. rsync故障排查整理

    1.客户端的错误现象:No route to host rsync服务端开启了iptables防火墙 rsync -avz /etc/hosts rsync_backup@172.16.1.41::b ...

  6. 某考试 T2 sum

    为什么其他人都是插值套插值啊,,,,就我是XJB做的吗2333 k次多项式的前缀和可以表示成k+1次多项式,用两次这个玩意就可以发现g可以表示成一个k+2次多项式. 然后我的做法是把g用拉格朗日插值+ ...

  7. 二叉树的层次遍历 II

    给定一个二叉树,返回其节点值自底向上的层次遍历. (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 例如:给定二叉树 [3,9,20,null,null,15,7], 3 / \ 9 20 ...

  8. 实验三：分别用for，while和do-while循环语句以及递归方法计算n!,并输出算式

    1.for循环语句计算n! 2.while循环语句计算n! 3.do-while语句计算n! 4.递归方法计算n! 5.心得:在此次实验中不知道如何从键盘进行输入,通过百度后找到一种容易理解的输入方法 ...

  9. BUPT复试专题—图像识别(2014-2)

    题目描述 在图像识别中,我们经常需要分析特定图像中的一些特征,而其中很重要的一点就是识别出图像的多个区域.在这个问题中,我们将给定一幅N xM的图像,其中毎个1 x 1的点都用一个[0, 255]的值 ...

  10. 微信小程序 项目实战（二）board 首页

    1.项目结构 2.页面 (1)数据(逻辑) board.js // pages/board/board.js Page({ /** * 页面的初始数据 */ data: { imgWrap: [] } ...