CSS Button
<html>
<head>
<style type="text/css">
.btn {
font-size:16px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #dcdcdc;
padding:9px 18px;
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
color:#777777;
display:inline-block;
text-shadow:1px 1px 0px #ffffff;
-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
box-shadow:inset 1px 1px 0px 0px #ffffff;
}
.btn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.btn:active {
position:relative;
top:1px;
}
/* CSS按钮生成器 */
</style>
</head>
<body>
<a href="#" class="btn">css button</a>
</body>
</html>
相关推荐
本篇文章将深入探讨“CSS button例子”这个主题，通过分析提供的文件“32、分享50个CSS超炫丽button样式代码下载”，我们将探索多种CSS技术来创建吸引人的按钮。 1. **基础样式**：CSS的基础按钮样式通常涉及`...
"50个css button样式"这个资源提供了一系列CSS代码示例，旨在帮助开发者创造出吸引眼球、功能各异的按钮。下面，我们将深入探讨CSS如何用于定制按钮样式，并通过这些例子学习如何提升网页设计的质量。 首先，CSS...
【CSS Button】是一种利用CSS（层叠样式表）技术来设计网页中按钮样式的实践方法。CSS Button的设计能够实现各种视觉效果，从简单的扁平化设计到复杂的3D效果，甚至是动态交互式按钮，都能通过CSS实现。这些按钮不仅...
本文将深入探讨如何使用CSS来创建美观且功能丰富的“CssButton”按钮样式，以及相关的实践示例。 一、基础按钮样式 一个基本的HTML按钮元素看起来像这样： ```html <button>点击我</button> ``` 默认情况下，...
不过，这样的按钮默认样式通常比较朴素，为了美化按钮，我们需要借助CSS的力量。CSS提供了多种属性来定制按钮的外观，包括颜色、大小、边框、阴影、字体等。 1. **颜色**：可以使用`color`属性设置按钮文字的颜色，...
"css_button"这个主题聚焦于如何利用CSS创建出吸引人且功能丰富的按钮。下面将详细探讨CSS按钮的设计原理、常见属性以及实现各种效果的方法。 一、基本CSS按钮结构 一个简单的CSS按钮通常由HTML的`<button>`或`<a>`...
本按钮样式集是从国外的CSS Button Generator 整理下来的。如果有需要的朋友可以放到自己的站点下，在需要的时候直接打开，复制需要的CSS样式以及调用CSS就可以了。CSS按钮效果通过本演示页面中的设置以及效果，选择...
【标题】：“一些漂亮的css3button” 在网页设计中，CSS3（层叠样式表第三版）已经成为一种不可或缺的技术，它极大地丰富了网页的表现力，尤其是对于按钮（button）的样式设计。本资源集合名为“一些漂亮的css3...
本文将详细讲解如何使用CSS（Cascading Style Sheets）来美化页面上的button控件。 首先，CSS是一种用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档呈现方式的语言。通过CSS，我们可以改变按钮的字体、...
标题“36种漂亮的CSS3网页按钮Button样式”所涵盖的知识点主要集中在如何利用CSS3的新特性来设计各种美观且功能丰富的网页按钮。 首先，CSS3提供了许多新的选择器，如伪类选择器`:hover`, `:active`, `:focus`，...
CSS设计简单的button风格的UI
本文将深入探讨如何使用CSS（层叠样式表）来创建好看且具有吸引力的button样式。 首先，CSS是网页设计中的核心技术之一，用于控制网页元素的外观和布局。通过CSS，我们可以定制按钮的颜色、大小、形状、边框、阴影...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制功能，尤其是在创建按钮（button）样式方面。"常用的css3 button彩色按钮样式代码"这个主题聚焦于利用CSS3来设计多彩、吸引人的按钮，提升用户...
本文将围绕“CSS Button样式”这一主题，深入探讨如何使用CSS技术来创建50种不同风格、炫丽多彩的按钮，旨在为开发者提供灵感和实践案例。 首先，CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG...
本文将围绕“50个CSS超炫丽button样式代码”这一主题，详细探讨CSS如何用于创建独特且吸引人的按钮样式。 首先，CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式...
本资源提供了50个使用CSS（层叠样式表）编写的炫丽button样式的代码示例，旨在帮助开发者和设计师创造出吸引眼球且功能完备的网页交互元素。 首先，HTML中的`<button>`元素用于创建可点击的按钮，它可以直接包含...
呵呵 很好哦 css自适应宽度的按钮！
【标题】"36种漂亮的CSS3网页按钮Button样式 下载.zip" 提供了一套丰富的CSS3按钮设计示例，旨在帮助网页设计师和开发者创建出美观且吸引人的交互元素。 【描述】中提到的"36种漂亮的CSS3网页按钮Button样式,...