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 ...
随机推荐
- 【自动化测试】使用Java+selenium填写验证码成功登录
这是我第一次发博客,若有问题,请多多指教! 本次是为了帮忙解决,如果在平时自动化遇到有验证码填写的情况,我们如何成功登录情况. 思路: 首先我们先将验证码复制并保存成一个图片,然后使用tesserac ...
- JS对象3
1.BOM对象 window对象 所有浏览器都支持window对象 概念上讲:一个html文档对应一个window对象 功能上讲:控制浏览器窗口的 使用上讲:window对象不需要创建对象,直接使用即 ...
- css 中 zoom和transform:scale的区别(转载)
一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...
- .NET中的泛型集合总结
最近对集合相关的命名空间比较感兴趣,以前也就用下List<T>, Dictionary<Tkey, TValue>之类,总之,比较小白.点开N多博客,MSDN,StackOve ...
- 关于javascript中的变量对象和活动对象
https://segmentfault.com/a/1190000010339180 https://zhuanlan.zhihu.com/p/26011572 https://www.cnblog ...
- php中数组直接用加号相加array+array
php中数组功能非常强大,甚至也可以直接通过+相加来合并数组. A数组 $a = ['a', 'b']; B数组 $b = ['c', 'd', 'e']; A+B结果 Array ( [0] =&g ...
- 【OJ】抓牛问题
/* 农夫John的奶牛跑路了.将地图视作一条数轴,John的初始位置在s而奶牛的位置在t(0<=s,t<=100000).John可以花费一分钟的时间使自己作如下移动: 1 从点x移动到 ...
- 描述逻辑（DL）基础知识
Logic逻辑理论实际上是一个规范性(normative)的理论,而不是一个描述性的(descriptive)理论.即,它并不是用来描述人类究竟是采用何种的形式来推理的,而是来研究人类应该如何有效的进 ...
- WinForm控件Dock属性设置会遮盖其他控件的解决
在被遮盖住的控件上,右击弹出快捷菜单,然后选择“置于顶层”.
- python基础的学习
今日内容 1.常见操作系 1.win win7 win10 window serrer 2.linux centons 图像界面差 upuntu 个人开发(图形化较好) redhat 企业 3.mac ...