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. 转 DOS 8.3 文件名命名规则

    http://www.360doc.com/content/10/0813/14/73007_45757514.shtml DOS 8.3 文件名命名规则 经常看到命令行或者其它软件在显示目录的时候出 ...

  2. poj 3311 状压dp 最短路

    C - Hie with the Pie Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64 ...

  3. 重写enum的valueof方法等

    enum 对象的常用方法介绍 int compareTo(E o)           比较此枚举与指定对象的顺序. Class<E> getDeclaringClass()        ...

  4. 33.Search in sorted Array

    /* * 33.Search in sorted Array * 2016-4-19 by Mingyang * 我自己写的代码,开始没有考虑[3,1]取1得情况,所以现在需要额外的加一个部分来 * ...

  5. Delphi GDI对象之绘制文本

    转载:http://www.cnblogs.com/pchmonster/archive/2012/07/06/2579185.html 基本绘图操作(Basic Drawing Operations ...

  6. Proximal Gradient Descent for L1 Regularization(近端梯度下降求解L1正则化问题)

    假设我们要求解以下的最小化问题: $min_xf(x)$ 如果$f(x)$可导,那么一个简单的方法是使用Gradient Descent (GD)方法,也即使用以下的式子进行迭代求解: $x_{k+1 ...

  7. 初探STL之算法

    算法 STL算法部分主要由头文件<algorithm>,<numeric>,<functional>组成.要使用 STL中的算法函数必须包括头文件<algor ...

  8. weex 项目开发（四）项目框架搭建 及 自定义 TabBar 组件

    1.安装  路由模块  及  状态管理模块 npm install vue-router --save npm install vuex --save 2.自定义  TabBar  组件 src / ...

  9. Effective C++ 条款四 确定对象被使用前已被初始化

    1.对于某些array不保证其内容被初始化,而vector(来自STL)却有此保证. 2.永远在使用对象前初始化.对于无任何成员的内置类型,必须手工完成.      int x = 0;      c ...

  10. php使用魔法函数和不使用魔法函数比较

    /** * use magic 0.31868386268616s * not use magic 0.11876797676086s */ class Test { private $varstr ...