经过测试的浏览器：IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon按钮的HTML代码：<input id="btn_comment_submit" type="button" class="comment_btn" value="提交评论"/>CSS代码：input::-moz-focus-inner{ border: 0;padding: 0;}/*针对Firefox*/ .comment_btn{ height:26px; line-height:22px;/*针对IE*/ width:68px; }原文：http://www.cnblogs.com/wawahaha/p/3530572.html
具体代码如下 button{position: relative; } button:active::before {display: block;content: ‘‘;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 5%) } 如果是自定义DIV也是可以用同样方法的，可以改为 .btn{position: relative;}/**这里的active为选中的状态，可以根据情况修改**/.btn:active::before {display: block;content: ‘‘;position: absolute;top: 0px;left: 0px;widt...
本文一步一步手把手教你打造一个极酷的三层分离的标准滑动门导航菜单.导言：本文一步一步手把手教你打造一个极酷的三层分离的标准滑动门导航菜单，从思路、原理、步骤，手段可谓“无所不用其极”，即便你是菜鸟，相信你看了本文后，也能打造出属于自己的超级漂亮的标准导航菜单。本菜单无冗余结构，利于数据动态输出，非常适合于用在平常的项目中去。本教程中讲到了基本的滑动门原理，相信对那些还在这条路上摸索的朋友会有一些帮助...
css中按钮有四种状态1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态.btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框下面的例子中.btn1用focus按钮会按下，不弹起 .btn2用active按钮点击按下，会弹起<button class="btn btn1">Save Settings</button><button class="btn btn2">Submit</button>.btn{appearance: none;background: #026aa7;color: #fff;font-size: 20p...
今天要给大家介绍的是css3按钮，里面包含四种特效的动画，如下图： 在线预览 下载源码实现html代码：<div align="center" class="fond"><br /><div class="bouton_1"><a href="#123"><img src="caddie.png"/><span class="texteduboutton_1">Ajouter au panier</span></a></div><br /> <br /><div class="bouton_2"><a href="#123"><img src="caddie.png"/><span class="texteduboutton_2">Ajouter au panier</span></a></div><...
这种纯CSS3美化单选按钮radio的方法适用于以下情况：1、可兼容IE9以上，需要兼容IE8的要写IE的hack把样式去掉2、只支持单选按钮radio，因为单选按钮选中样式的圆圈可以用CSS做出来，但是复选按钮checkbox的选中效果对勾就需要图片或者图标字体库3、不需要JS支持切换效果下图是最终效果图：HTML代码：<label for="man" class="radio"><span class="radio-bg"></span><input type="radio" name="sex" id="man" value="男" checked="c...
就是做到类似于下图这种效果 通过简单的Css样式就可以实现 复制代码代码如下:<div style="margin:0 auto;width:200px;"> <input class="submit" id="btn" type="submit" value="注册" /> </div> 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto;} 缩写形式为： .style{margin:0 auto;} 数字0 表示上下边距是0。可以按照需要设置成不同的值。 后面的那个width也是个很...
概要层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。熟练掌握CSS的基本原理可以实现更好的页面交互效果，提升用户的使用体验。代码实现新建文件夹social-3d-hover，social-3d-hover下新建index.html和style.css文件，index.html引入...
复制代码 代码如下:<% rem 文章标题： 利用vbs类实现css按钮 rem 作者：yanek rem 联系：aspboy@263.net Class CssButton Public Name Public BackColor Public BorderColor Public Font Public FontColor Public Width Public Text Public Url Public MouseOverColor Public Function GenerateStyleTag() ‘Create the STYLE tag Dim strStyle strStyle = "<STYLE TY...
本文将要向大家分享8款精美的CSS3表单设计，内容包括登录表单、下拉选择、按钮等，每一个表单都有演示和源码下载，如果你喜欢，就赶紧收藏他们吧。1、简易的CSS3登录表单在线演示 -源码下载2、CSS3切换式按钮开关在线演示 -源码下载3、仿Facebook的登录表单在线演示 -源码下载4、自定义美化select下拉框在线演示 -源码下载5、CSS3联系表单在线演示 -源码下载6、黑色个性化CSS3登录表单在线演示 -源码下载7、HTML5 & CSS3 信封形式的...
CSS3样式：/* RADIO */.button-holder { width: 100%;}.regular-radio { display: none;}.regular-radio + label { -webkit-appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 50px; display: inline-block; position: relative;}.regular-radio:checked + label:after { content: ‘...
<button class="layui-btn layui-btn-primary layui-col-md-offset8" lay-active="dropDownContent"> <i class="layui-icon layui-icon-app layui-bg-white"></i> </button><div class="layui-row" style="display:none;" id="downCent">展示隐藏内容 </div>layui.use(["util", "dropdown"], function () {let util=layui.util; util.event(‘lay-active‘, { ...
好看的按钮 <style> .btn {BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid } .btn1_mouseout {BORDER-RIGHT: ...
新技能传授-哔哔哔哔search类型搜索框，设计师常常会设计一个叉叉图标，表示用户点之久可以清除输入的内容。比方说这个：这是不错的体验！当前现代浏览器中，Chrome浏览器下type=search的输入框会有清除按钮的动态呈现，不过搜索input框尺寸不太好控制(padding无视)；FireFox浏览器貌似任何类型的输入框都无动于衷；IE10+浏览器貌似任何输入框都会出现清除按钮，但是长得略微粗糙了点，设计师同学接受不了。貌似不和谐了，咋办？传...
1.html<div> <input type="checkbox" id="option"/> <label for="option"> <span></span> 点击1 </label></div><div> <input type="radio" name="my-radio" id="radio-option-1"/> <label for="radio-option-1"> <span></span> 点击2 </label></div><div> <input type="radio" name="my-radio" id="radio-option-2"/> <label for="radio-option-2"> <span></span> 点击3</label></div>2.cssbody { font-famil...