<!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. luogu P3952 时间复杂度 模拟

    题目链接 luogu P3952 时间复杂度 题解 直接模拟即可 注意不要直接return 我真是naive ...... 代码 #include<map> #include<sta ...

  2. 潭州课堂25班：Ph201805201 tornado 项目 第九课 深入应用 WebSockets（课堂笔记）

    tornado 相关说明 在 handler 中创建一个  chat.py 文件,用来处理聊天室 在 templates 模板文件夹下创建 room.html 文件,是个聊天室 做好服务器的准备

  3. Java 获取当前日期的几种方法

    import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Calendar; import ja ...

  4. 在Linux下开发多语言软件(gettext解决方案)

    最近的项目出现了一个bug.项目是基于一个已有的成熟开源软件之上做修改的,新写了加解密库,用于为该成熟开源软件增添加解密功能.功能增加完成后效果都很好,可是就是中文出不来了,也就是说没办法自适应多语言 ...

  5. Node.js_Buffer 缓冲区

    Buffer 缓冲区 虽然 JavaScript 支持未操作,但是并没有 二进制数据 的原生 node 引入了 Buffer 类,用于操作二进制数据 是 V8 引擎的扩展,实际上是对内存的直接分配 每 ...

  6. 秒杀linux下系统调用fork()面试题（转）

    https://blog.csdn.net/chdhust/article/details/10579001 https://www.cnblogs.com/clover-toeic/p/375443 ...

  7. CSP201312-4 有趣的数【dp】

    问题描述 试题编号: 201312-4 试题名称: 有趣的数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 我们把一个数称为有趣的,当且仅当: 1. 它的数字只包含0, 1, ...

  8. 电子产品使用感受之——我的Mac只有256GB，我的照片库该怎么办？

    说实话我使用过的Mac中最大的默认存储可能就是2011年开始使用的MacBook Pro了,机器型号大概是MC700,这台机器当年自带320GB 5400转机械硬盘,直到2016年因为使用率太高,机械 ...

  9. 将win7 设置为 NTP服务器

    1. 修改注册表项 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer Enabl ...

  10. linux基础命令--userdel 删除用户帐户和相关文件

    描述 userdel命令用于删除用户帐户和相关文件. userdel命令修改系统账户文件,删除所有涉及用户的信息,指定的用户(LOGIN)必须存在. 语法 userdel [options] LOGI ...