<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变按钮</title>
    <link rel="stylesheet" href="style1.css" type="text/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>

.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: linear-gradient(to left,orange,red);
}
.but1:hover{
    background: red;
    background: linear-gradient(to right,orange,red);
}

html5 渐变按钮练习的更多相关文章

  1. 巧用HTML5给按钮背景设计不同的动画

      如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3   animation 来动画   background-size  和  background-posit ...

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

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

  3. Android 动态渐变按钮

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

  4. html5——渐变

    线性渐变 <style> div { width: 700px; height: 100px; /*方向:从右向左*/ /*起始颜色:黄色*/ /*终止颜色:绿色*/ background ...

  5. CSS3实现的渐变按钮，在IE7、IE6下的滤镜使用。

      .ui-button { BORDER-LEFT-WIDTH:; ; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-T ...

  6. 自己动手画一个HTML5的按钮

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

  7. html5: 幽灵按钮

    html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  8. 一组简单好看的css3渐变按钮

    主要代码如下: body { background:#fff } /* Mixins */ /* bg shortcodes */ .bg-gradient1 span,.bg-gradient1:b ...

  9. 超多的CSS3圆角渐变网页按钮

    <!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...

随机推荐

  1. SDOI2018：原题识别

    题解: https://files.cnblogs.com/files/clrs97/old-solution.pdf Code: #include<cstdio> #include< ...

  2. JTS相关资料和示例

    示例 JTS基本概念和使用 JTS Geometry之间的关系 JTS algorithm package

  3. IOS中多线程的总结

    首先要知道线程和进程的区别.一个系统上运行的每一个应用程序都是一个线程.而进程中要执行的任务都是在线程上来实现的,所以说线程是进程的最小执行单元. 进程最少要有一个线程.多线程,顾名思义就是多条线程. ...

  4. 小甲鱼Python第二十二讲课后习题

    笔记: 斐波那契数列的两种实现方式:   迭代的方式: 自己写的: def fab(n): n1 =1 n2 =1 n3 =1 if n < 1: return -1 if n ==1: ret ...

  5. 什么是Hash?Hash有哪些特性？

    Hash 把任意长度的输入通过散列算法变换成固定长度的输出 Hash的特性: 输入域无穷,输出域有限.例如:有无穷多个(在工程中可以具体到多少个,例如1000)输入参数经过hash函数映射后得到有限的 ...

  6. JBPM工作流（八）——流程实例（PI）Process Instance

    /** * 流程实例 *    *  启动流程实例 *    *  完成任务 *    *  查询 *      *  查询流程实例 *      *  查询任务 *          *  查询正在 ...

  7. 问题：怎么把mysql的系统时间调整为电脑的时间？(已解决）

    我的mysql是5.7版本. 浏览mysql的错误日志的时候,发现时间和电脑时间不一致. 查了一下,知道这个时间和log_timestamps有关, 就在mysql里执行下面一句话: SET GLOB ...

  8. IOS不支持iframe的解决办法

    最近做ios的兼容,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口.刚开始用iframe页面嵌套(第一次尝试使用),但发现iOS系统对iframe嵌套页面的高度和定位控制 ...

  9. 数电基础之《OC门》

    OC门,又称集电极开路门,Open Collector.   为什么引入OC门?实际使用中,有时需要两个或两个以上与非门的输出端连接在同一条导线上,将这些与非门上的数据(状态电平)用同一条导线输送出去 ...

  10. FPGA小例子

    AND ---与门:OR --- 或门:INV --- 非门:NAND --- 与非门:NOR --- 或非门:XOR --- 异或门:XNOR ---同或门:MUX --- 数据选择器: 1.使用一 ...