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 ...
随机推荐
- python MRO:C3算法
http://www.codeweblog.com/python-mro-c3%E7%AE%97%E6%B3%95/ 在 python 2.2 之后,python 实现了一个新的MRO算法:C3算法, ...
- Jmeter学习系列----2 录制脚本
虽然专业的自动化测试人员都不会选择录制脚本的方式来进行自动化脚本的编写,但是,我们作为初学者还是可以学习一下怎么利用工具来进行脚本的录制,体验一下自动化工具的效率,下面,具体讲下如何使用jmeter自 ...
- MacBook Air 装win10系统 by DODUI
为了给齐哥更完美的体验Windows10系统,DODUI亲手操刀MacBook双系统安装Win10,双系统安装教程如下: 终于遇到各种奇葩问题,给小伙伴分享一下. 双系统安装Win10准备工具: 1. ...
- css3的动画
一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...
- 关于python字符串基本操作
python字符串基本操作,比如字符串的替换.删除.截取.复制.连接.分割等.都是一些关于字符串的一些方法.下面来列举一些,相信对学习python还是有些帮助的. 1.去除空格--strp(): &g ...
- 使用 Windows PowerShell 实现 Web UI 自动化 （转)
转自 https://msdn.microsoft.com/zh-cn/magazine/cc337896.aspx
- [dev][ipsec][dpdk] strongswan/dpdk源码分析之ipsec算法配置过程
1 简述 storngswan的配置里用一种固定格式的字符串设置了用于协商的预定义算法.在包协商过程中strongswan将字符串转换为固定的枚举值封在数据包里用于传输. 协商成功之后,这组被协商选中 ...
- cve-2018-4878漏洞复现
CVE-2018-4878Flash 0day漏洞1.漏洞概述2018年2月1号,Adobe官方发布安全通报(APSA18-01),声明Adobe Flash 28.0.0.137及其之前的版本,存在 ...
- wpf 获取Image的图片并保存到本地
XMAL代码如下: <Image Name="ImageToSave" Source="Images/pic_bg.png" Grid.RowSpan=& ...
- Windows10 ntoskrnl.exe占用大量的磁盘空间（100%）
一.解决办法: 1.此电脑(右键)> 管理(点击)> 系统工具 > 任务计划程序 > 任务计划程序库 > Microsoft > windows > .NE ...