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. 【BZOJ3991】寻宝游戏（虚树，DFS序，splay）

    题意:求在树中从任意点开始,经过若干个关键点回到原点的最小距离 要求支持在线将某个点设置(取消)为关键点,以及询问答案 n,m<=100000 len[i]<=10^9 思路:显然是一个虚 ...

  2. PHP 之命名空间

    文件A.php namesspace a\b; Class User{ function get_user(){ echo 'this is A Class'; } } 文件B.php namessp ...

  3. 生成PDF文档

    byte[] buffer = context.Response.Clear(); context.Response.ClearHeaders(); context.Response.ClearCon ...

  4. ros使用罗技f710无线控制手柄

    参考:blog.csdn.net/hcx25909/article/details/9042469 罗技F710无线控制手柄ROS下使用说明 安装手柄相关的包和驱动 sudo apt-get inst ...

  5. Nginx的Web管理界面收集

    Nginx实在是太强大了!灰度发布.金丝雀发布.负载均衡就只需要简单的几行配置就可以实现,这些特性嗾使微软无法比拟的. 原来Nginx除了使用ngx_http_stub_status_module模块 ...

  6. mysql explain 的type解释

    原文:http://blog.csdn.net/github_26672553/article/details/52058782 Explain命令 用于分析sql语句的执行情况和成本预估 今天我们重 ...

  7. ASP.NET Core 如何记录每次响应的Response信息 - sky 胡萝卜星星 - CSDN博客

    原文:ASP.NET Core 如何记录每次响应的Response信息 - sky 胡萝卜星星 - CSDN博客 上一篇文章中我们已经成功的记录了Request部分的信息,现在我们来看下如何记录Res ...

  8. [Javascript] Use a custom sort function on an Array in Javascript

    Sorting in Javascript with sort uses lexical sorting by default, which means it will sort in alphabe ...

  9. (C++ STL)list的实现

    #include <iostream> using namespace std; //採用迭代器和空间配置器所实现的双向链表的基本功能 template<class _Ty,clas ...

  10. HDU 2108 Shape of HDU (判断是不是凸多边形 叉乘)

    Shape of HDU Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...