`
txf2004
  • 浏览: 7040157 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

一个css做的按钮

阅读更多
<iframe name="google_ads_frame" marginwidth="0" marginheight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-4490194096475053&amp;dt=1228586971281&amp;lmt=1228528457&amp;prev_slotnames=1891601125&amp;output=html&amp;slotname=3685991503&amp;correlator=1228586971250&amp;url=http%3A%2F%2Fwww.corange.cn%2Farchives%2F2008%2F10%2F1830.html&amp;ea=0&amp;ref=http%3A%2F%2Fwww.corange.cn%2Fhtml%2Fcorange__97.html&amp;frm=0&amp;ga_vid=23952867.1228586971&amp;ga_sid=1228586971&amp;ga_hid=2060443442&amp;flash=9.0.124.0&amp;u_h=768&amp;u_w=1024&amp;u_ah=738&amp;u_aw=1024&amp;u_cd=32&amp;u_tz=480&amp;u_java=true&amp;dtd=15" frameborder="0" width="300" scrolling="no" height="250" allowtransparency></iframe>
<style>
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
</style>
<a class="button" href="#" onclick="this.blur();"> <span>Submit</span> </a>
<a class="button" href="#"><span>Cancel</span></a>
分享到:
评论

相关推荐

    CSS经典圆形按钮

    本主题聚焦于一个特定的设计元素——"CSS经典圆形按钮"。圆形按钮是网页设计中常用的一种交互元素,它们通常用于导航、触发操作或者展示社交链接。下面我们将深入探讨如何利用CSS来创建美观且功能齐全的圆形按钮。 ...

    CSS简单大气按钮

    首先,我们要了解CSS按钮的基本结构。一个按钮通常由HTML的`&lt;button&gt;`元素或者`&lt;a&gt;`元素(模拟按钮效果)来创建。例如: ```html 点击我 ``` 接下来,我们通过CSS来美化这个按钮。我们可以使用`class`选择器来为...

    CSS图标按钮合集

    通过内联SVG或者背景图像的方式,可以将自定义图标整合到CSS按钮中。 6. 颜色和主题:CSS图标按钮的颜色和主题可以根据网站的整体风格进行定制。通过修改CSS中的颜色变量,可以快速地改变所有按钮的颜色方案,从而...

    CssButton按钮样式

    总结,CSS按钮样式的创建是一项涉及多个方面的任务,包括颜色、形状、尺寸、文字样式、状态转换以及响应式设计。通过不断实践和调整,你可以创造出符合项目需求的独特按钮样式,提升用户界面的美感和交互体验。

    纯CSS3按钮3D效果.zip

    本主题聚焦于“纯CSS3按钮3D效果”,这是一个利用CSS3的特性来实现的交互式按钮设计,它在用户点击时能够呈现出逼真的3D下凹效果,提升了用户体验和界面的美观度。以下将详细介绍这一技术的关键知识点: 1. **CSS3 ...

    12个超赞的CSS按钮,绝对的震撼

    6. 过渡效果:transition属性允许指定一个或多个CSS属性在不同状态间平滑过渡,例如改变按钮在鼠标悬停时的大小、颜色或背景位置。 7. RGBA颜色:CSS3引入了RGBA颜色模式,允许设置颜色的透明度,相比于传统RGB,...

    CSS3游戏首页动画按钮,CSS3动画按钮

    **CSS3游戏首页动画按钮与CSS3动画按钮详解** 在网页设计中,视觉效果和交互体验是提升用户体验的重要因素。CSS3(Cascading Style Sheets Level 3)作为现代网页设计的标准,为开发者提供了丰富的样式控制和动画...

    按钮素材css按钮

    首先,创建一个水晶按钮的基本结构通常涉及HTML的`&lt;button&gt;`或`&lt;a&gt;`标签,然后在CSS中对其进行样式化。例如: ```html 点击我 ``` 接下来,我们可以通过CSS设置按钮的基本样式: ```css .crystal-btn { padding:...

    5组可爱CSS3按钮

    例如,可以创建一个从上至下或者从左至右的颜色过渡,使按钮看起来更加立体和动态。 3. **阴影效果**:`box-shadow`属性是实现3D效果的关键。通过调整阴影的偏移量、模糊半径、颜色和扩展距离,可以模拟出按钮的...

    漂亮的CSS滤镜按钮

    在网页设计中,CSS滤镜按钮是一种常见的交互元素,用于为用户提供不同的视觉效果或功能选择。这类按钮通常具有美观的设计和动态变换的视觉效果,能够提升用户体验并吸引用户注意。本篇文章将深入探讨如何利用CSS来...

    10套精美而实用的CSS3按钮

    这款CSS3社会化分享按钮另一个特点是可以固定在网页顶部,让用户可以更方便的分享网页内容。 在线演示 源码下载 2、CSS3发光社会分享按钮 超酷CSS3按钮组合 之前我们分享过很多炫目的CSS3按钮,而且大部分按钮都有...

    8款超酷而实用的CSS3按钮动画

    这次要分享一个非常具有动画色彩的CSS3按钮,按钮的外观比较一般,但它有两个特别的地方:一、按钮悬浮,整个按钮看上去像是悬浮在半空中一样,很立体;二、点击按钮时利用HTML5 Canvas绘制彩球飞舞的效果,非常...

    css3按钮库zardi

    CSS3按钮库Zardi是一款基于纯CSS3技术创建的立体按钮样式集合,旨在为网页设计师提供多样化的按钮设计选择。这个库的特点在于其利用CSS3的特性,如渐变、阴影、边框半径和过渡效果,实现了无需依赖图像就能创建出...

    50个漂亮的css按钮

    本资源"50个漂亮的css按钮"提供了一组美观的CSS样式,旨在帮助开发者创建吸引人的、交互性强的网页按钮。这些按钮设计各具特色,涵盖了多种风格和用途,可以满足不同网页设计的需求。 1. **CSS按钮的基本结构** ...

    6种炫酷的CSS3按钮边框动画特效

    本资源“6种炫酷的CSS3按钮边框动画特效”是一个集合,它包含六种独特且吸引人的按钮动画效果,能够提升网页界面的互动性和用户体验。 首先,CSS3的边框动画特性主要依赖于`transition`、`transform`和`animation`...

    js效果:CSS实现超级炫酷的流光按钮效果;在网页中实现文字的一个一个出现

    首先,定义一个按钮的基本样式,例如边框、圆角和内阴影,然后创建一个关键帧动画(@keyframes)来定义颜色变化的过程。例如: ```css .button { padding: 10px 20px; border-radius: 5px; box-shadow: 0 2px 5...

    css选择按钮组

    "CSS选择按钮组"是一个常见的网页组件,用于创建一组可选的按钮,通常用于用户进行多项选择。这种组件在各种网页应用中广泛使用,例如表单提交、导航菜单和设置选项等。下面将详细探讨如何利用CSS来设计和定制这样的...

    收藏的几个css按钮样式

    这里我们探讨的是几种经典的CSS按钮样式,这些样式可以为网页增添视觉吸引力并提升用户体验。 首先,让我们来看一下`&lt;style&gt;`标签内的CSS代码。这段代码定义了三种不同的按钮类:`.btn`, `.btn1_mouseout`, `.btn1_...

    在线CSS按钮生成工具

    在"css-button-1.0"这个文件中,很可能包含了一个特定版本的CSS按钮样式示例或者是一个简单的教程。使用这个资源,设计师可以学习到具体的代码实现,从而加深对CSS按钮设计的理解。"说明.htm"文件可能是对这个工具或...

    7款外观迷人的HTML5/CSS3 3D按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家...CSS3按钮可以做的非常漂亮,又可以融合一些超酷的动画特效,比如这款按钮纯CSS3 3D按钮 按钮酷似牛奶般剔[......] 阅读全文&gt;&gt;

Global site tag (gtag.js) - Google Analytics