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. Codevs 2855 游乐园的迷宫

    2855 游乐园的迷宫  时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 迷宫可是每个游乐园必不可少的项目,菜菜当然是要尝试一下啦. ...

  2. "Javascript高性能动画与页面渲染"笔记

    前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗 ...

  3. Requests模拟登陆

    requests模拟登陆知乎网站 实例 # -*- coding: utf-8 -*- __author__ = 'CQ' import requests try: import cookielib ...

  4. collection包1.1.0都升级了什么功能

    collection包1.1.0都升级了什么功能 jianfengye/collection(https://github.com/jianfengye/collection) 这个包喜迎第一个子版本 ...

  5. Python3 MySQL 数据库连接 - PyMySQL 驱动 笔记

    sql插入语句(推荐): str_mac = "nihao" # SQL 插入语句 sql = "INSERT INTO EMPLOYEE(FIRST_NAME, \ L ...

  6. 彻底理解javascript 中的事件对象的pageY, clientY, screenY的区别和联系。

    说到底, pageY, clientY, screenY的计算,就是要找到参考点, 它们的值就是: 鼠标点击的点----------- 和参考点指点----------的直角坐标系的距离 stacko ...

  7. iOS 获取appstore 版本

    项目上线以后一般都涉及到升级.那么iOS 怎样从appstore获取到版本 事实上非常easy NSString *url = [[NSString alloc] initWithFormat:@&q ...

  8. Android源代码解析之（三）--&gt;异步任务AsyncTask

    转载请标明出处:一片枫叶的专栏 上一篇文章中我们解说了android中的异步消息机制. 主要解说了Handler对象的使用方式.消息的发送流程等.android的异步消息机制是android中多任务处 ...

  9. github 新建远程仓库 及 删除远程仓库

    一.新建远程仓库 1.点击 ' + ' 号 2.选择 ' new repository ' 3.填写信息  创建仓库 二.删除远程仓库 1.点击 ' Settings ' 按钮 2.滑动到最底部,点击 ...

  10. insertion-sort-list——链表、插入排序、链表插入

    Sort a linked list using insertion sort. PS:需要考虑left为head且只有一个数时,此时left->==NULL,若right<left则应更 ...