<!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. url传参过程中文字需编码、解码使用

    1.链接进行编码跳转:window.location.href = encodeURI(url) 2.获取当前链接进行解码:decodeURI(window.location); 3.获取url中参数 ...

  2. Android的Activity组件

    本章主题是Activity组件:Activity是Android四大组价之一,其重要地位自然不用说.“Activity是应用程序中可见的交互组件的基类,大致上等同于传统桌面应用个程序开发中的窗体.”( ...

  3. [POJ1050]To the Max (矩阵,最大连续子序列和)

    数据弱,暴力过 题意 N^N的矩阵,求最大子矩阵和 思路 悬线?不需要.暴力+前缀和过 代码 //poj1050 //n^4暴力 #include<algorithm> #include& ...

  4. vue学习：安装及创建项目

    1.先安装npm 参考链接:https://www.cnblogs.com/Hao-Killer/p/7235398.html 查看npm版本:在终端输入:npm -v 2.在安装vue # 安装vu ...

  5. CSS3_过渡_2D 变换_瓶体旋转_动态时钟

    1. 过渡 transition 允许 CSS 的属性值在一定时间内平滑的过渡, 在鼠标点击,鼠标滑过或对属性改变中触发,并圆滑的改变 CSS 的属性值 简写属性: #box { width: 300 ...

  6. 5. 箭头函数_this 指向_es6 常用语法

    1. 箭头函数 函数的简写方式 () => {} 只有一个参数时,可以省略() ---- x => {} 只有一条语句时,可以省略{},此时这点语句的结果会作为函数的返回值返回  () = ...

  7. Centos7 编译安装 Nginx PHP Mariadb Memcache扩展 ZendOpcache扩展 (实测 笔记 Centos 7.0 + Mariadb 10.1.9 + Nginx 1.9.9 + PHP 5.5.30)

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7-x86_64-Minimal-1503-01.iso 安装步骤: 1.准备 1.1 ...

  8. textarea 中的换行符

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

  9. ie清理缓存

    说废话,直接上图. 1.打开浏览器 2.工具--->Internet选项 3.常规--->设置 4.Internet临时文件--->查看文件 5.将缓存文件夹中内容全部删除

  10. iOS UIView 选择性倒角

    有些APP中会有卡券,卡券做成了选择性倒角,例如左上,右上倒角.非常美观.看一下iOS的实现: #import "Masonry.h" @interface WJWDaojiaoV ...