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 ...
随机推荐
- 对Spring运用的一些思考
最近使用spring总是遇到启动时启动不起来,或者启动起来一会就服务就关闭掉. 停下来想想不是spring不好复杂,而是我对它掌握不够,再有就是使用要尽量规范 使用配置文件,dao.manager.s ...
- Petrozavodsk Winter-2018. Jagiellonian U Contest
A. XOR 求出所有数的异或和$sum$,将所有数and上$sum$,然后求线性基,则选取$sum$的所有$1$对应的基最优. 时间复杂度$O(n\log x)$. #include<cstd ...
- 如何使用JavaScript实现纯前端读取和导出excel文件
js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...
- vue学习：安装及创建项目
1.先安装npm 参考链接:https://www.cnblogs.com/Hao-Killer/p/7235398.html 查看npm版本:在终端输入:npm -v 2.在安装vue # 安装vu ...
- aspose 生成word 简单的文档操作
package aspose.com.word; import com.aspose.words.Document;import com.aspose.words.DocumentBuilder; p ...
- SQLSERVER 聚集一个表的字段2008及以后，要求支持XML
将以下代码中的TABLE_NAME替换成所需表名称即可. 注意 declare 和set 语句后面不要有 :否则可能执行不成功 declare @S_Column varchar(8000)set @ ...
- DevExpress GridControl复合表头（多行表头）设置
关于DevExpress.XtraGrid的复合表头或多行表头的示例,界面如下图所示 1.首先要把DevExpress的GridControl转换为BandedGridView 2.设置显示列及绑定的 ...
- domain logic approaches
领域逻辑组织可以分为三种主要的模式:事务脚本(Transaction Script).领域模型(Domain Model)和表模块(Table Module)” 1.domain logic appr ...
- 用sort方法输出数组
- python panda::dataframe常用操作
1.条件查询: result = df.query("((a==1 and b=="x") or c/d < 3))" print result 2.遍历 ...