html5 渐变按钮练习
<!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 渐变按钮练习的更多相关文章
- 巧用HTML5给按钮背景设计不同的动画
如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3 animation 来动画 background-size 和 background-posit ...
- 一款纯css3实现的颜色渐变按钮
之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览 ...
- Android 动态渐变按钮
先上个图 看着特别炫酷吧 其实就是自定义颜色两秒轮播动画 AnimationDrawable animationDrawable = (AnimationDrawable) button.getBac ...
- html5——渐变
线性渐变 <style> div { width: 700px; height: 100px; /*方向:从右向左*/ /*起始颜色:黄色*/ /*终止颜色:绿色*/ background ...
- CSS3实现的渐变按钮，在IE7、IE6下的滤镜使用。
.ui-button { BORDER-LEFT-WIDTH:; ; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-T ...
- 自己动手画一个HTML5的按钮
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- html5: 幽灵按钮
html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- 一组简单好看的css3渐变按钮
主要代码如下: body { background:#fff } /* Mixins */ /* bg shortcodes */ .bg-gradient1 span,.bg-gradient1:b ...
- 超多的CSS3圆角渐变网页按钮
<!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...
随机推荐
- ECMA Script 6_数组的扩展_扩展运算符
1. 扩展运算符 内部调用的是数据结构的 Iterator 接口, 因此只要具有 Iterator 接口的对象,都可以使用扩展运算符 ... 如 map,,,, [...arr] 扩展运算符(spre ...
- Java for Android 学习第一周
前言 专业Java程序员所必需掌握的3个主题: 1. Java编程语言 2. 使用Java的面向对象编程(OOP) 3. Java核心库 JDK.JRE和JVM 1. javac编译java源代码为字 ...
- 图像转pdf(c#版)
using iTextSharp.text;using iTextSharp.text.pdf;using iTextSharp.text.pdf.codec;using System;using S ...
- Web Service学习（一）
1.WebMethod特性包含哪些属性,都有什么用? 1.BufferResponse属性 该属性表明是否启用对Web Service方法响应的缓冲.当设置为true时,Web Service方法将响 ...
- leetcode 单链表相关题目汇总
leetcode-19-Remove Nth From End of List—移除链表中倒数第n个元素 leetcode-21-Merge Two Sorted Lists—两个已排序链表归并 ...
- Python学习小纪
1.打包发布*.py文件---"文件路径下打开命令行 d:\python\python.exe setup.py sdist" eg:打包发布f:\C\python\print_l ...
- Python全栈-magedu-2018-笔记4
第三章 - Python 内置数据结构 元组tuple 一个有序的元素组成的集合 使用小括号 ( ) 表示 元组是不可变对象 元组的定义 初始化 定义 tuple() -> empty tupl ...
- 这样，可以在firefox播放flash了
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="62" heigh ...
- react-native-Cocoapods-Swift-Project
https://reactnative.cn/docs/integration-with-existing-apps/ 1.创建一个xcode工程,single View就行,项目语言选择swift, ...
- Mac上配置GTK环境
Mac上配置GTK环境 安装command line工具, 如果安装了Xcode, 就直接跳过该步骤 安装Homebrew 使用brew install pkg-config 使用brew insta ...