<!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. GUI Design Studio的使用方法

    一.GUI Design Studio的介绍 GUI DesignStudio 是一个给应用软件设计图形用户界面的专业工具,它可在画基于web形态的原型时,可以用 Axure RP. Balsamiq ...

  2. Python-读文件

    用python读一个文件,我们一般采用  open('文件名字')这里的文件名可以说完整路径也可以是相对路径(要读取的文件和和代码放在一起) f = open('data.txt')此时我们只是打开了 ...

  3. 项目导入之后报错：The import javax.servlet cannot be resolved

    项目导入之后报错:The import javax.servlet cannot be resolved 解决方法:在Eclipse中,右击项目,选择Build Path->configure ...

  4. Java 常见异常种类

    Java Exception: 1.Error 2.Runtime Exception 运行时异常3.Exception 4.throw 用户自定义异常 异常类分两大类型:Error类代表了编译和系统 ...

  5. [LeetCode] Largest Sum of Averages 最大的平均数之和

    We partition a row of numbers A into at most K adjacent (non-empty) groups, then our score is the su ...

  6. 2、vuex页面刷新数据不保留，解决方法（转）

    今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...

  7. Nginx基本安装

    Windows安装Nginx 解压:nginx-windows 双击: nginx.exe 能看到nginx欢迎界面说明,nginx安装成功 演示下 nginx做静态服务器 启动Nginx C:\se ...

  8. Linux系统安装tomcat

    1.首先下载tomcat:http://tomcat.apache.org/download-60.cgi 2.解压缩tar.gz文件: tar -xzvf xxxxxxx/apache-tomcat ...

  9. java_xml_解析

    xml解析的两种的基本方式 1:SAX解析:一行一行的解析,不回头 2:DOM解析:将整个XML以树状读到内存中,然后需要哪一部分就取哪一部分 SAX解析: 基于java的步骤: //1.获取解析工厂 ...

  10. 使用yield生成器，用Python实现用户对用户输入信息的监听和过滤

    # -*- coding:utf-8 -*-'''''''''生成器是一次生成一个值的特殊类型函数.可以将其视为可恢复函数.调用该函数将返回一个可用于生成连续 x 值的生成[Generator],简单 ...