1、话不多说直接贴上效果图,有loadding图片的,代表提交后的状态。
2、代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>纯css按钮,完美兼容浏览器</title> <style type="text/css"> /*loading class*/ .loading span b{ background-image:url(/image/loading.gif); background-repeat:no-repeat; background-position:left; padding-left:18px; } /*yellow btn*/ .yellow_btn { border: 1px solid #ff9b01; background: #ffa00a; } .yellow_btn span { min-width: 49px; _width: 49px; border-color: #ffb33b; } /*blue btn*/ .blue_btn { border: 1px solid #296797; background: #4D8EC4; } .blue_btn span { border-color: #74C0FA; min-width: 49px; _width: 49px; } /*white btn*/ .white_btn { border: 1px solid #C7C7C7; background: #F5F5F5; } .white_btn span { border-color: #FAFAFA; min-width: 49px; _width: 49px; color: #000000; } /*common btn*/ .btn { color: #fff; border-radius: 2px; display: inline-block; overflow: hidden; vertical-align: middle; cursor: pointer; text-decoration:none; } .btn span { text-align: center; white-space: nowrap; display: inline-block; border-style: solid; border-width: 1px; border-radius: 2px; height: 26px; line-height: 25px; vertical-align: middle; } </style> </head> <body> <table style="margin:0 auto;margin-top:200px;"> <tr> <td>蓝色按钮:</td> <td style="width:200px;text-align:center;"> <a href="javascript:void(0);" class="btn blue_btn loading"> <span style="width:100px;"><b>登录</b></span> </a> </td> <td> <a href="javascript:void(0);" class="btn blue_btn"> <span style="width:100px;"><b>登录</b></span> </a> </td> <td> 区别在于class[loading] </td> </tr> <tr> <td>黄色按钮:</td> <td style="width:200px;text-align:center;"> <a href="javascript:void(0);" class="btn yellow_btn"> <span><b>登录</b></span> </a> </td> </tr> <tr> <td>白色按钮:</td> <td style="width:200px;text-align:center;"> <a href="javascript:void(0);" class="btn white_btn"> <span><b>登录</b></span> </a> </td> </tr> </table> </body> </html>
附件,loadiing.gif素材
相关推荐
CSS写的发送按钮特效 感兴趣的同学可以下载研究研究
超多款的CSS3响应式按钮特效,每一款都有不同的动画效果,一款有7种不同的效果,每一个HTML对应一个演示效果,当鼠标悬停于按钮时,按钮动态变化,具有...通过这些按钮特效,你也可学习研究下CSS3 HTML5的相关属性。
收集几款漂亮的CSS3按钮美化例子,这些按钮包括了背景渐变、圆角按钮、带图标的按钮、带序号的按钮、带外框阴影的按钮等,本演示代码更侧重于学习研究,代码的实际用途并不是很大。
每个Demo都是对特定前端技术的探索,无论是研究HTML5的新特性、CSS3的动画效果,还是JavaScript的高级功能。这些示例不仅适合初学者学习和理解前端开发的基础知识,也适合有经验的开发者寻找灵感或者解决特定问题。 ...
今天来分享很不错的CSS3按钮动画,这款CSS3按钮一共...以第一个按钮为例,其他按钮的代码大家可以下载源代码来研究,并不是很难。 HTML代码: XML/HTML Code复制内容到剪贴板 <a>Download <p\u00a0class=
css样式制作的按钮,很漂亮,值得收藏,在下文贴出具体的实现css,喜欢的朋友可以研究下
如果您不熟悉CSS定制属性,请研究它们。它们非常强大。请和此处了解它们。 简而言之,CSS自定义属性是在CSS中定义变量的一种方法。 例如,下面CSS定义了一个名为--max-page-width的变量,该变量以后可用于设置页面...
Dsure参考了国内/外优秀的框架库,经过仔细研究探讨,针对国内和国外网站开发需求,重构编写了一套更适宜于国内(包括国外)的网站CSS/HTML开发框架,在这里它主要运用于Designers Site Program 全站静态系统的各类高端...
网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十种之多,但始终鲜为人知,部分公司甚至将CSS的垂直居中技巧当成面试题,其重要...
本文介绍的是css3的3d模块,对大家具有一定的参考价值,感兴趣的朋友们下面来一起看看吧。 介绍 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向。 不理解的话可以...
进阶CSS / SCSS作业:高级CSS结果:看一下这个项目: : 描述最后的任务包括3个独立CSS挑战,这些挑战越来越困难。 对每个作业使用Sass和BEM原理。 除非您的窗口非常狭窄(认为小于400像素),否则网站不应水平滚动...
相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上。 起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片素材不会利用,只能用ps...
Path菜单的小按钮本来应该也可以旋转的,但CSS3动画的位移和旋转同时出现时不知道为何旋转就没效果了,所以这里没弄出来,感兴趣的朋友可以研究一下解决方法。 运行效果截图如下: 在线演示地址如下: ...
单击“替换”按钮逐个行删除空行,或单击“全部替换”按钮删除全部空行(注意:EditPlus有时存在“全部替换”不能一次性完全删除空行的问题,可能是程序BUG,需要多按几次按钮)。 【6】软件技巧——键盘记录的注意...
从锚元素开始,我们将构建滚动和动画转盘,带有动态,可禁用弹出窗口的图像地图,然后继续研究鼠标和键盘的交互,切换和聚焦状态。 然后,我们将继续使用CSS进行计算和计数:我们将建立一个模拟和数字时钟,一个...
源码实现可以支持放大缩小按钮的效果源码,点击按钮,按钮会变大,碰到边缘后再按就变小,缩小到一定程度后又变大,喜欢的朋友可以研究一下吧。
新颖功能为了帮助经验不足的开发人员浏览生产网页上的复杂DOM和CSS结构,Ply实现了以下新颖功能: 视觉相关性修剪(CHI 2017 SRC,):在检查元素的样式时,用户可以单击按钮以动态排除样式,而不会在页面上产生视觉...
这是一个UUID生成器的项目,我已经研究了NextJS和Tailwind CSS。 :grinning_face: 该项目是由@ florinpop17创建的#30Days30Projects Challenge的一部分,该挑战包括:在30天内每天创建一个项目。 :nerd_face: 我在...