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 ...
随机推荐
- 201771010126 王燕《面向对象程序设计（java）》第二周学习总结
201771010126 王燕<面向对象程序设计(java)>第二周学习总结 一．理论知识学习部分 3.1j简单 的java应用程序 标识符由字母.下划线.美元符号和数字组成, 且第一个符 ...
- oldboy es和logstash
logstash: input:https://www.elastic.co/guide/en/logstash/current/input-plugins.html input { file { p ...
- 关于SQLite3笔记
sq .help .quit .exit 创建和连接数据库:在linux中 sqlite3 数据库名 没有就创建 有就连接 .show 显示各种设置的当前值. .echo ON|OFF echo命令 ...
- vscode + electron 提示：无法连接到legacy请采用inspector解决办法
首先,你的程序是可以直接运行的,在命令行中可以运行,只是在vsCode中,运行一段时间就被这个提示弹出. 解决方法: 先在launch.json 中加上"protocol":&qu ...
- PHP 可以获取客户端哪些访问信息---来自网页转载
php是一种弱类型的程序语言,但是最web的 在程序语言中有系统全局函数: $_SERVER <?php echo "".$_SERVER['PHP_SELF'];#当前正在 ...
- 中文乱码总结之web乱码情景
情景1.当servlet返回js脚本时弹出框显示中文乱码: 解决:在servlet中加上response.setContentType(“text/html;charset=utf-8”); 情景2. ...
- c语言的二进制表示的是什么码
int -1 的二进制是 1111 1111 1111 1111 1111 1111 1111 1111 int -2 的二进制是 1111 1111 1111 1111 1111 1111 1111 ...
- JVM内存模型与垃圾回收
内存模型 1,程序计数器(Program Counter Register):程序计数器是一个比较小的内存区域,用于指示当前线程所执行的字节码执行到了第几行,可以理解为是当前线程的行号指示器.字节码解 ...
- 关于ico图标
ico图标可以作为网页标签上显示的小logo,比如: 要获取一个网站的ico图标,只需要在url后输入/favicon.ico即可,比如 https://www.baidu.com/favicon ...
- 关于Android的fragment的使用
fragment的静态使用 首先创建两个fragment,就把fragment当成activity去写布局,第一个是fragment_title: <LinearLayout xmlns:and ...