<html>
<head>
<title>My project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
/*box-shadow: 0 1px 2px rgba(12,0,0,.2);*/
}
.button:active {
position: relative;
top: 1px;
}
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
/* CSS container shadow */
</style>
</head>
<body>
<input type="button" class="button orange" value="test" />
</body>
</html>
分享到：
相关推荐
目前CSS3的应用已经越来越普及了，它最常见的一个圆角功能非常的不错，可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果，本实例就是一款直接用CSS3实现的，无需其他任何JS或者flash、亦不需任何...
2. 应用CSS样式：接着，使用CSS3对按钮进行样式设置，包括边框、填充、圆角、尺寸等属性。关键在于定义`background-image`为线性渐变，并设置渐变的颜色和方向。例如： ```css button { background-image: linear-...
HTML5 CSS3制作的带图标的不规则按钮，这些不规则的形状其实是有规则的，像圆角、椭圆、梯形等，只不过是印象中比矩形的按钮稍微些，但是这些按钮应用在网页上，感觉很有个性哦，让人眼前一亮的感觉，按钮是带有图标...
总结起来，创建自适应宽度的CSS圆角背景按钮，主要依赖于`border-radius`属性实现圆角效果，利用`display: inline-block;`和不设定固定宽度实现自适应宽度，以及通过适当的内填充和文本对齐方式保持内容居中。通过...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够创建具有不同背景颜色的圆角按钮。本文将深入探讨如何利用CSS3实现这样的效果，以及相关的知识点。 首先，让我们理解CSS3...
"好看的网页按钮，CSS圆角按钮"这个主题关注的就是如何利用CSS技术来创建既美观又吸引人的按钮。CSS，即层叠样式表（Cascading Style Sheets），是用于控制网页元素样式的一种语言，它赋予了网页设计师极大的灵活性...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够创建具有视觉吸引力的圆角按钮。本教程将详细介绍如何利用CSS3的属性来制作美观的圆角按钮，让你的网页界面更加精致。 ...
现在在来分享一款CSS3按钮，首先这款CSS3按钮是圆角的，正常情况下有着不同颜色的边框线，按钮是空心的，鼠标滑过按钮时，按钮即以淡入的效果填充背景色，鼠标移出时又以淡出的效果取消背景色，是一款简单而又实用的...
【jQuery + CSS3 圆角动画导航】 在网页设计中，导航栏是用户与网站交互的重要部分，良好的导航设计能够提升用户体验。本示例“jquery+css3圆角动画导航”利用了JavaScript库jQuery和CSS3的新特性，为网页创建了一...
本资源“78个纯CSS3方形圆角立体质感按钮”正是一个利用CSS3特性的优秀实例，旨在帮助开发者创建具有专业外观和动态效果的用户界面。 首先，CSS3中的`border-radius`属性在这些按钮的设计中起到了关键作用，它允许...
本主题聚焦于“纯CSS3按钮3D效果”，这是一个利用CSS3的特性来实现的交互式按钮设计，它在用户点击时能够呈现出逼真的3D下凹效果，提升了用户体验和界面的美观度。以下将详细介绍这一技术的关键知识点： 1. **CSS3 ...
CSS自适应宽度圆角按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head> <meta ...
在网页设计中，按钮是用户交互的重要元素，而圆角按钮因其柔和的视觉效果和现代感，常常被广泛应用。此特效旨在使按钮的宽度根据其包含的文字数量自动调整，提升用户体验。 【描述】提到的"圆角自适应长度按钮特效...
这些类包含了一系列的CSS规则，如`border-radius`用于创建圆角，`padding`和`line-height`控制按钮的大小和文本位置，以及前面提到的`transform`、`box-shadow`和`transition`属性。 值得注意的是，尽管这些3D按钮...
"css3实现3d凹凸按钮.zip"这个压缩包就是一个实例，展示了如何利用CSS3的特性创建具有立体感的按钮。这个实例主要涉及以下几个核心知识点： 1. **CSS3伪类选择器**：在实现3D按钮时，我们通常会用到`:hover`、`:...
纯CSS3动画按钮是网页设计中的一个重要元素，它利用了CSS3的新特性，如过渡（transition）、动画（animation）和伪类（pseudo-classes），来实现丰富的交互效果，提升用户体验。下面将详细介绍这些知识点。 1. CSS3...
4. **边框半径**：`border-radius`属性允许我们创建圆角按钮，这是CSS3的一大亮点。通过设置不同的半径值，可以创建从微小的圆角到完全圆形的按钮。 5. **文本效果**：除了按钮的背景和边框，CSS3还可以对按钮内的...
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML...在"css3-buttons-download"这个压缩包文件中，可能包含了多种不同样式的按钮示例，你可以参考这些代码，进一步学习和定制自己的CSS按钮样式。
总之，CSS3气泡按钮特效是一种创新且实用的设计技巧，结合了圆角、阴影、过渡、变换和渐变等多种CSS3特性，为网页元素带来了更丰富的视觉表现力和互动性。通过深入理解和实践，设计师和开发者能够创造出更多独具特色...
随着CSS3技术的发展，我们能够创建出具有3D效果和动态弹性的按钮，极大地提升了用户体验。本篇文章将深入探讨如何利用CSS3来实现3D弹性按钮。 ### 1. CSS3 3D变换 CSS3中的3D变换让我们可以对元素进行立体空间的...