html5 css3按钮2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cross-browser CSS gradient buttons demo - Redteamdesign</title>
<style>
body {
background: #e5e5e5;
text-align: center;
} /*----------------------------*/
.button {
margin: 10px;
text-decoration: none;
font: bold 1.5em 'Trebuchet MS', Arial, Helvetica;
/*更变按钮的大小来个调整位置*/
display: inline-block;
text-align: center;
color: #fff;
border: 1px solid #9c9c9c; /*边框样式 */
border: 1px solid rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);
}
.button,.button span {
-moz-border-radius: .3em;
border-radius: .3em;
}
.button span {
border-top: 1px solid #fff; /* 上边框样式 */
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
padding: 0.5em 2.5em; /* 对齐 */
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0,
0.05) ), color-stop(.25, transparent), to(transparent) ),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0,
0.05) ), color-stop(.25, transparent), to(transparent) ),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent),
color-stop(.75, rgba(0, 0, 0, 0.05) ) ),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent),
color-stop(.75, rgba(0, 0, 0, 0.05) ) );
background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%,
transparent 25%, transparent ),
-moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%,
transparent ),
-moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75% ),
-moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%
);
-moz-background-size: 3px 3px;
-webkit-background-size: 3px 3px;
background-size: 3px 3px;
}
.button:hover {
box-shadow: 0 0 .1em rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 .1em rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 .1em rgba(0, 0, 0, 0.4);
}
.button:active {
/* 按钮点击 更变button位置，从而出现动态效果*/
position: relative;
top: 1px;
} /*----------------------------*/
.button-khaki {
background: #A2B598;
background: -webkit-gradient(linear, left top, left bottom, from(#BDD1B4),
to(#A2B598) );
background: -moz-linear-gradient(-90deg, #BDD1B4, #A2B598);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#BDD1B4', EndColorStr = '#A2B598' );
}
.button-khaki:hover {
background: #BDD1B4;
background: -webkit-gradient(linear, left top, left bottom, from(#A2B598),
to(#BDD1B4) );
background: -moz-linear-gradient(-90deg, #A2B598, #BDD1B4);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#A2B598', EndColorStr = '#BDD1B4' );
}
.button-khaki:active {
background: #A2B598;
} /*----------------------------*/
.button-blue {
background: #4477a1;
background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb),
to(#4477a1) );
background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
filter: progid : DXImageTransform.Microsoft.gradient ( GradientType = 0,
startColorstr = '#81a8cb', endColorstr = '#4477a1' );
}
.button-blue:hover {
background: #81a8cb;
background: -webkit-gradient(linear, left top, left bottom, from(#4477a1),
to(#81a8cb) );
background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
filter: progid : DXImageTransform.Microsoft.gradient ( GradientType = 0,
startColorstr = '#4477a1', endColorstr = '#81a8cb' );
}
.button-blue:active {
background: #4477a1;
} /*----------------------------*/
.button-brown {
background: #8f3714;
background: -webkit-gradient(linear, left top, left bottom, from(#bf6f50),
to(#8f3714) );
background: -moz-linear-gradient(-90deg, #bf6f50, #8f3714);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#bf6f50', EndColorStr = '#8f3714' );
}
.button-brown:hover {
background: #bf6f50;
background: -webkit-gradient(linear, left top, left bottom, from(#8f3714),
to(#bf6f50) );
background: -moz-linear-gradient(-90deg, #8f3714, #bf6f50);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#8f3714', EndColorStr = '#bf6f50' );
}
.button-brown:active {
background: #8f3714;
} /*----------------------------*/
.button-green {
background: #428739;
background: -webkit-gradient(linear, left top, left bottom, from(#c8dd95),
to(#428739) );
background: -moz-linear-gradient(-90deg, #c8dd95, #428739);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#c8dd95', EndColorStr = '#428739' );
}
.button-green:hover {
background: #c8dd95;
background: -webkit-gradient(linear, left top, left bottom, from(#428739),
to(#c8dd95) );
background: -moz-linear-gradient(-90deg, #428739, #c8dd95);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#428739', EndColorStr = '#c8dd95' );
}
.button-green:active {
background: #428739;
} /*----------------------------*/
.button-red {
background: #D82741;
background: -webkit-gradient(linear, left top, left bottom, from(#E84B6E),
to(#D82741) );
background: -moz-linear-gradient(-90deg, #E84B6E, #D82741);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#E84B6E', EndColorStr = '#D82741' );
}
.button-red:hover {
background: #E84B6E;
background: -webkit-gradient(linear, left top, left bottom, from(#D82741),
to(#E84B6E) );
background: -moz-linear-gradient(-90deg, #D82741, #E84B6E);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#D82741', EndColorStr = '#E84B6E' );
}
.button-red:active {
background: #D82741;
} /*----------------------------*/
.button-purple {
background: #6F50E7;
background: -webkit-gradient(linear, left top, left bottom, from(#B8A9F3),
to(#6F50E7) );
background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#B8A9F3', EndColorStr = '#6F50E7' );
}
.button-purple:hover {
background: #B8A9F3;
background: -webkit-gradient(linear, left top, left bottom, from(#6F50E7),
to(#B8A9F3) );
background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#6F50E7', EndColorStr = '#B8A9F3' );
}
.button-purple:active {
background: #6F50E7;
} /*----------------------------*/
.button-black {
background: #141414;
background: -webkit-gradient(linear, left top, left bottom, from(#656565),
to(#141414) );
background: -moz-linear-gradient(-90deg, #656565, #141414);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#656565', EndColorStr = '#141414' );
}
.button-black:hover {
background: #656565;
background: -webkit-gradient(linear, left top, left bottom, from(#141414),
to(#656565) );
background: -moz-linear-gradient(-90deg, #141414, #656565);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#141414', EndColorStr = '#656565' );
}
.button-black:active {
background: #141414;
} /*----------------------------*/
.button-orange {
background: #f09c15;
background: -webkit-gradient(linear, left top, left bottom, from(#f8c939),
to(#f09c15) );
background: -moz-linear-gradient(-90deg, #f8c939, #f09c15);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#f8c939', EndColorStr = '#f09c15' );
}
.button-orange:hover {
background: #f8c939;
background: -webkit-gradient(linear, left top, left bottom, from(#f09c15),
to(#f8c939) );
background: -moz-linear-gradient(-90deg, #f09c15, #f8c939);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#f09c15', EndColorStr = '#f8c939' );
}
.button-orange:active {
background: #f09c15;
} /*----------------------------*/
.button-silver {
background: #c5c5c5;
background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea),
to(#c5c5c5) );
background: -moz-linear-gradient(-90deg, #eaeaea, #c5c5c5);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#eaeaea', EndColorStr = '#c5c5c5' );
}
.button-silver:hover {
background: #eaeaea;
background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5),
to(#eaeaea) );
background: -moz-linear-gradient(-90deg, #c5c5c5, #eaeaea);
filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,
StartColorStr = '#c5c5c5', EndColorStr = '#eaeaea' );
}
.button-silver:active {
background: #c5c5c5;
}
</style>
<!-- AdPacks -->
<style>
#adpacks-wrapper {
font-family: Arial, Helvetica;
width: 280px;
position: fixed;
_position: absolute;
bottom: 0;
right: 20px;
z-index: 9999;
background: #eaeaea;
padding: 10px;
-moz-box-shadow: 0 0 15px #444;
-webkit-box-shadow: 0 0 15px #444;
box-shadow: 0 0 15px #444;
}
body .adpacks {
background: #fff;
padding: 15px;
margin: 15px 0 0;
border: 3px solid #eee;
}
body .one .bsa_it_ad {
background: transparent;
border: none;
font-family: inherit;
padding: 0;
margin: 0;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
padding: 0;
float: left;
margin: 0 10px 0 0;
}
body .one .bsa_it_ad .bsa_it_i img {
padding: 0;
border: none;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 0 0 6px 0;
font-size: 11px;
}
body .one .bsa_it_p {
display: none;
}
body #bsap_aplink,body #bsap_aplink:hover {
display: block;
font-size: 9px;
margin: -15px 0 0 0;
text-align: right;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px;
}
body .one {
overflow: hidden
}
</style>
</head>
<body>
<h1>
html5 CSS3 渐变按钮
</h1>
<a href="http://www.clxgj.com" class="button button-khaki"><span>Button</span>
</a>
<a href="http://www.clxgj.com" class="button button-blue"><span>Button</span>
</a>
<a href="http://www.clxgj.com" class="button button-brown"><span>Button</span>
</a>
<br>
<a href="http://www.clxgj.com" class="button button-red"><span>Button</span>
</a>
<a href="http://www.clxgj.com" class="button button-purple"><span>Button</span>
</a>
<a href="http://www.clxgj.com" class="button button-green"><span>Button</span>
</a>
<br>
<a href="http://www.clxgj.com" class="button button-black"><span>Button</span>
</a>
<a href="http://www.clxgj.com" class="button button-orange"><span>Button</span>
</a>
<a href="http://www.clxgj.com" class="button button-silver"><span>Button</span>
</a>
</body>
</html>
- 大小: 61.9 KB
发表评论
相关推荐
2、新款CSS3按钮组合 5组可爱CSS3按钮 之前我分享过一些时尚的CSS3动画按钮，比如CSS3渲染Checkbox实现3D开关切换按钮、纯CSS3 3D按钮 按钮酷似牛奶般剔透等等。今天就再来分享一款可爱的CSS3按钮组合，该CSS3按钮...
之前我介绍过几款漂亮的CSS3开关切换按钮，比如这款CSS3渲染Checkbox实现3D开关切换按钮就利用了CSS3和checkbox实现了开关切换...今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还可以。
通过结合HTML5的多媒体支持和CSS3的动态效果，这个音量调节旋转按钮实现了在各种现代浏览器上的无缝体验。项目的源码可以作为学习和参考的实例，帮助开发者深入理解如何利用这些技术创建自定义的UI组件。通过阅读和...
本主题聚焦于“纯CSS3按钮3D效果”，这是一个利用CSS3的特性来实现的交互式按钮设计，它在用户点击时能够呈现出逼真的3D下凹效果，提升了用户体验和界面的美观度。以下将详细介绍这一技术的关键知识点： 1. **CSS3 ...
在“HTML5 CSS3音量调节旋转按钮”这个项目中，开发者利用了这两种技术来实现一个直观且易于使用的音量控制功能。这个功能允许用户通过按住鼠标并旋转按钮来调整音频的音量大小，提升了用户的交互体验。 HTML5在...
【标题】"近100款漂亮CSS3/HTML5按钮合集.rar"涉及的知识点主要集中在CSS3和HTML5的交互设计上，尤其是利用这两种技术实现的各种样式丰富的按钮效果。CSS3是CSS（层叠样式表）的第三个版本，引入了大量新的选择器、...
在本压缩包"HTML5 css3渐变按钮代码.rar"中，包含的是一个使用纯HTML5和CSS3实现的渐变按钮的示例代码。这个例子特别之处在于它没有依赖JavaScript或任何图片资源，完全通过CSS3的属性来创建按钮的渐变效果。 首先...
之前我们已经分享过一款基于HTML5和CSS3技术的社会化分享CSS3发光社会分享按钮，发光效果挺酷的。这次我依然要分享一款还不错的纯CSS3社会化分享按钮组合，该按钮默认可以分享facebook、twitter、youtube等社交网站...
本资源“5款纯css3按钮样式”就是一个很好的例子，展示了如何利用CSS3的特性来打造吸引眼球且功能多样的按钮。以下是关于这个主题的详细讲解。 首先，CSS3的伪元素`::before`和`::after`在这些按钮样式中起到了关键...
2、HTML5/CSS3悬浮按钮特效 Canvas彩球飞舞效果 这次要分享一个非常具有动画色彩的CSS3按钮，按钮的外观比较一般，但它有两个特别的地方：一、按钮悬浮，整个按钮看上去像是悬浮在半空中一样，很立体；二、点击按钮...
**CSS3游戏首页动画按钮与CSS3动画按钮详解** 在网页设计中，视觉效果和交互体验是提升用户体验的重要因素。CSS3（Cascading Style Sheets Level 3）作为现代网页设计的标准，为开发者提供了丰富的样式控制和动画...
在本资源“HTML5 CSS3实现倾斜按钮.zip”中，包含了一组使用HTML5和CSS3编写的46种不同效果的按钮样式，这些按钮的特点是具有倾斜效果，为网页设计增添了独特的动态感。 首先，我们来了解HTML5。HTML5是超文本标记...
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、MathML等各种XML方言）文档...在压缩包"css3-circle-social-buttons"中，可能包含了多个预设样式的CSS圆形按钮示例，供你参考和学习。
这次我们要来分享一款基于HTML5和CSS3的社会化分享按钮，这款分享按钮外观样式非常漂亮，按钮的色彩也比较华丽自然，这款基于HTML5的分享按钮提供两种样式，一种是图标式按钮，另一种则是图标结合文字的按钮样式。...
在"HTML5+CSS3实现的音量调节旋转按钮动态特效源码"中，我们可以看到这两个技术如何协同工作，创建出一个交互性强、用户体验优秀的音量调节组件。 HTML5作为下一代超文本标记语言，引入了许多新元素，比如`<audio>`...
【纯CSS3按钮边框线条动画特效】是一种利用现代浏览器对CSS3特性的支持，创造出极具视觉吸引力的按钮效果。这种特效主要通过CSS3的动画（Animation）和过渡（Transition）属性来实现，无需JavaScript或其他编程语言...
在HTML5和CSS3的支持下，扁平化按钮不仅有极简的外观，还能实现丰富的交互效果。 【HTML5中的新元素】 在HTML5中，新增的`<button>`元素用于创建可点击的按钮，它可以嵌入文本或者图像。通过设置`type`属性，如`...
**CSS3 3D按钮特效详解** 在网页设计中，按钮是用户交互的重要元素，而CSS3的引入为按钮的设计带来了无限可能，尤其是3D效果的实现，使得按钮更具立体感，增强了用户的视觉体验。本篇文章将深入探讨“CSS3 3D按钮...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是按钮边框的动画特效。本资源“6种炫酷的CSS3按钮边框动画特效”是一个集合，它包含六种独特且吸引人的按钮动画效果，...
在本资源中，我们主要探讨的是使用CSS3创建动态3D动画效果的按钮。CSS3是一种强大的样式表语言，它极大地扩展了CSS2的功能，引入了许多新的特性和属性，使得网页设计更加生动、富有表现力。配合HTML5，我们可以构建...