<!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. Android中的WeakReference 弱引用

    WeakReference 弱引用 定义:弱引用,与强引用(我们常见的引用方式)相对:特点是:GC在回收时会忽略掉弱引用对象(忽略掉这种引用关系),即:就算弱引用指向了某个对象,但只要该对象没有被强引 ...

  2. [jzoj]2505.【NOIP2011模拟7.29】藤原妹红

    Link https://jzoj.net/senior/#main/show/2505 Description 在幻想乡,藤原妹红是拥有不老不死能力的人类.虽然不喜欢与人们交流,妹红仍然保护着误入迷 ...

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

    测试题: 0.  递归在编程上的形式是如何表现的呢? 在编程上,递归表现为函数调用本身这么一个行为. 1.  递归必须满足哪两个基本条件? 一.        函数调用自身二.        设置了正 ...

  4. [LeetCode] Construct Quad Tree 建立四叉树

    We want to use quad trees to store an N x N boolean grid. Each cell in the grid can only be true or ...

  5. FloatingActionButton的使用

  6. 正则序RegExp

    正则的理解 1.正则的懒惰性    每次在exec()中捕获的时候,只捕获第一次匹配的内容,而不往下不捕获了.我们把这叫正则的懒惰性,每一次捕获的开始位置都是从0开始 解决正则的懒惰性 修饰符g 正则 ...

  7. ApiKernel

    using System; using System.Runtime.InteropServices; using System.Text; using HANDLE = System.IntPtr; ...

  8. java--List、Set、Map的基础

    好像面试很多面试官都喜欢问这它们的一些问题,所以在这里我稍微总结一下,并把大佬们的文章链接贴在后面. 首先我们借鉴了https://www.cnblogs.com/SnowingYXY/p/67273 ...

  9. Django中的form组件

    Django中的form组件有两大作用 1.验证获取正确的结果或者错误信息 2.生成html代码 一.为什么需要form组件呢? 在写form表单,提交数据时,自己写验证的代码是一件非常困难的事情. ...

  10. PySe-008-开启浏览器的手机模式

    以 Chrome 为例,通过设置 chromeoption 的参数即可实现启动浏览器后,开启手机模式.相应设置的源代码如下所示: chromeOptions = webdriver.ChromeOpt ...