CSS3 按钮 技术教程文章
用CSS3实现带有阴影效果和颜色渐变的按钮【代码】【图】
这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)： 首先是box-shados语法,用于向框添加一个或多个阴影：box-shadow: h-shadowv-shadowblurspreadcolor inset;值描述h-shadow必须。水平阴影的位置v-shadow必须。垂直阴影的位置blur可选。模糊距离spread可...
9款经典华丽的CSS3分享按钮
如果你经常活跃在一些社交网站上，那么你肯定会看到过很多形式各异的分享按钮，目前由于HTML5和CSS3的普及，很多分享按钮也都应用了CSS3样式，甚至会有很多带有动画的CSS3分享按钮。本文就向大家介绍了9款经典华丽的CSS3分享按钮，以及它们的源代码，希望能给各位开发者带来一定的帮助。1.jQuery/CSS3实现超酷的分享按钮今天要分享的这款分享按钮是基于CSS和jQuery的，按钮比较大，非常大气。在线演示源码下载2.jQuery交互式分享按...
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)【图】
本文将要向大家分享8款精美的CSS3表单设计，内容包括登录表单、下拉选择、按钮等，每一个表单都有演示和源码下载，如果你喜欢，就赶紧收藏他们吧。1、简易的CSS3登录表单在线演示 -源码下载2、CSS3切换式按钮开关在线演示 -源码下载3、仿Facebook的登录表单在线演示 -源码下载4、自定义美化select下拉框在线演示 -源码下载5、CSS3联系表单在线演示 -源码下载6、黑色个性化CSS3登录表单在线演示 -源码下载7、HTML5 & CSS3 信封形式的...
通过CSS3伪类，美化Radio按钮样式
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: ‘...
利用CSS3实现文本框的清除按钮相关的一些效果
新技能传授-哔哔哔哔search类型搜索框，设计师常常会设计一个叉叉图标，表示用户点之久可以清除输入的内容。比方说这个：这是不错的体验！当前现代浏览器中，Chrome浏览器下type=search的输入框会有清除按钮的动态呈现，不过搜索input框尺寸不太好控制(padding无视)；FireFox浏览器貌似任何类型的输入框都无动于衷；IE10+浏览器貌似任何输入框都会出现清除按钮，但是长得略微粗糙了点，设计师同学接受不了。貌似不和谐了，咋办？传...
css3单选 复选按钮--代码分享【代码】
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...
css3实现会动的菜单按钮（menu）效果【图】
这篇文章给大家介绍的内容就是关于css3实现会动的菜单按钮（menu）效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。需要做一个会的动画按钮效果，小前端不知道如何实现，我看了一眼需要的效果，给他写了一个简单的 demo。设计师给了俩图片，一个是 三 这样的菜单图标，另一个是点击时，变成 X 的图标。希望在这两个图标之间，有动画切换效果。因为图标非常简单，我们可以用 css 把这俩图标画出来，然后做一个...
基于CSS3animation的鼠标滑过按钮特效的实例详解【图】
简要教程 这是一组使用CSS3 animation制作的鼠标滑过按钮动画特效。这组鼠标滑过按钮动画共有13最后效果，均由按钮的伪元素和CSS3 animation来制作完成。 查看演示 下载插件 使用方法 HTML结构 该效果通过超链接来制作按钮，例如第一种Swipe效果的HTML代码为：<a class="btn-0" href="#">Swipe</a> CSS样式 为了方便，特效中为除了<i>、<em>、<b>、<strong>和<span>之外的所有元素都添加了动画过渡效果。h...
CSS3展现横向滚动菜单按钮效果代码【图】
今天给大家分享基于css3实现精美的横向滚动菜单按钮，非常不错，具有参考借鉴价值，需要的的朋友参考下吧废话不多说，直接上图：然后是代码：<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>精美横向滚动菜单按钮 - Glunefish</title></head> <!-- 这里接下面的行间样式 --><body><ul><li><a href="" class="a1"><span>Home</span></a></li><li><a href="" class="a2"><span>Chat</span></a></li><li><a href="" cla...
36种漂亮的CSS3网页按钮Button样式，总有你喜欢的
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style type="text/css"> body{ background: #f5faff; } .demo_con{ width: 960px; margin:40px auto 0; } .button{ width: 140px; line-height: 38px; text-align: center; font-weight: bold; color: #fff; text-shadow:1px 1px 1px #333; border-radius: 5px; margin:0 20px 20px 0; position: relative; overflow: hi...
利用CSS3美化单选、复选按钮的显示样式【图】
众所周知，表单中的一写元素原生样式不是很好看，项目中用到的时候需要优化，下面这篇文章主要介绍了如何利用CSS3美化单选、复选按钮的显示样式,需要的朋友可以参考借鉴，下面来一起看看吧。前言相信大家都知道在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。要覆写这两个按钮默认样式比较困难。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。利用CSS3我们可以打造非常具有个性化的用户表单...
使用CSS3实现的3D按钮精美效果代码【图】
使用css3代码来制作3D按钮效果，这是一个系列的3D按钮制作效果，制作方法是老套（万变不离其中），但其中色彩的调各非常不错，因为很多效果在PS中制作是容易，特别对于设计师来说更容易，但对于一名coder来说，还是有点困难，具体请看制作的代码，让代码来展现所有的一切。我想您和我一样会为这样的效果折服.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
怎么用css3制作样式好看的按钮？【图】
本篇文章主要介绍了用css3制作样式好看的按钮，即圆角点击向右滑动按钮功能。希望本文介绍对大家有所帮助。注：CSS3，CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。用css3制作样式好看按钮的具体代码示例如下：<div class="container fix"><h1>Animated Buttons <span>with CSS3 Transitions and Animations</span></h1><div class="content"><div class="button-wrapper"><a href="#" class="a-btn"><span class="a-bt...
css3实现3D按钮效果的文章推荐【图】
使用css3代码来制作3D按钮效果，这是一个系列的3D按钮制作效果，制作方法是老套（万变不离其中），但其中色彩的调各非常不错，因为很多效果在PS中制作是容易，特别对于设计师来说更容易，但对于一名coder来说，还是有点困难，具体请看制作的代码，让代码来展现所有的一切。我想您和我一样会为这样的效果折服.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
CSS3实现横向滚动菜单按钮的示例代码分享【图】
今天给大家分享基于css3实现精美横向滚动菜单按钮，非常不错，具有参考借鉴价值，需要的的朋友参考下吧废话不多说，直接上图：然后是代码：<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>精美横向滚动菜单按钮 - Glunefish</title></head> <!-- 这里接下面的行间样式 --><body><ul><li><a href="" class="a1"><span>Home</span></a></li><li><a href="" class="a2"><span>Chat</span></a></li><li><a href="" class...
css3实现带有简单动画按钮导航
transition-property：all | none | <property>[ ,<property> ]*默认值：all取值：all：所有可以进行过渡的css属性none：不指定过渡的css属性<property>：指定要进行过渡的css属性说明： www.2cto.com检索或设置对象中的参与过渡的属性。默认值为：all。默认为所有可以进行过渡的css属性。如果提供多个属性值，以逗号进行分隔。对应的脚本特性为transitionProperty。html代码如下：<div class="content"><h2>Simple Animated Menu ...
基于纯CSS3的6种手绘涂鸦按钮效果
简要教程 这是一组非常有趣的纯CSS3手绘风格卡通按钮设计效果。这组手绘风格按钮共6种不同的效果，它们以手绘涂鸦的方式，以不同的按钮边框线条宽度和虚线来构成按钮，效果非常不错。使用方法 HTML结构该手绘风格卡通按钮的HTML结构就是使用一个按钮<button>元素,配以不同的class类来实现不同的手绘风格按钮。<section><button class=lined thick>Lined Thick</button><button class=dotted thick>Dotted Thick</button><butto...
详解css3美化单选按钮radio实例
这种纯CSS3美化单选按钮radio的方法适用于以下情况：1、可兼容IE9以上，需要兼容IE8的要写IE的hack把样式去掉2、只支持单选按钮radio，因为单选按钮选中样式的圆圈可以用CSS做出来，但是复选按钮checkbox的选中效果对勾就需要图片或者图标字体库3、不需要JS支持切换效果<label for="man" class="radio"><span class="radio-bg"></span><input type="radio" name="sex" id="man" value="男" checked="checked" /> 男<span class="ra...
基础理解2:CSS3按钮动画【图】
一个Css3按钮效果很好，仔细看了一下发现就是::after,::before然后加上transition，transform等效果实现，主要关注一下几点就能轻松实现： 1、伪类需要position定位，相对的button也需要定位一下 2、设置一下z-index属性,一般button设置为1， button::after或者button:before设置为-1即可 3、transition实现动画效果，如果需要transform旋转一下 效果如下：代码如下： DOCTYPE html><html><head><meta http-equiv="Content-Type...
如何利用用CSS3美化单选框radio、多选框checkbox和switch开关按钮【图】
本篇文章给大家带来的内容是关于如何利用用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。很多时候我们需要美化单选框 radio 和多选框 checkbox ，因为原生的样式比较丑陋，而且表现不统一。CSS3之前一般用 js 来模拟，而如今完全可以用纯CSS实现radio和checkbox的美化。对于移动端很早就写过相关的模拟样式：一个适合移动端的checkbox 和 css3实现的...
- 1
- 2
- 共 2 页
- 共 33 条