CSS3按钮选择器：设计网页链接平滑的按钮

文章简介：CSS3按钮选择器 ，通过CSS3新特性把普通的html链接设计成视觉上平滑的按钮m包括梯度背景、圆角、下拉阴影，以及转换等效果。支持CSS 3动画，可以把按钮逐渐地从默认状态变为悬停状态.
CSS3按钮选择器，通过CSS3新特性把普通的html链接设计成视觉上平滑的按钮，包括梯度背景、圆角、下拉阴影，以及转换等效果。支持CSS 3动画，可以把按钮逐渐地从默认状态变为悬停状态，你可以在不使用如上图那样的图片的情况下得到一个漂亮的按钮。

  1. button {
  2. -moz-border-radius: 25px;
  3. -moz-box-shadow: #6E7849
    0px
    0px
    10px;
  4. -moz-transition: all 0.5s ease;
  5. -ms-transition: all 0.5s ease;
  6. -o-transition: all 0.5s ease;
  7. -webkit-border-radius: 25px;
  8. -webkit-box-shadow: #6E7849 0 0 10px;
  9. -webkit-transition: all 0.5s ease;
  10. background-color: #6E7849;
  11. background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);
  12. background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);
  13. background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
  14. background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
  15. background-image: linear-gradient(90deg, #B9C788, #6E7849);
  16. border-radius: 25px;
  17. border: 2px
    solid
    #4a5032;
  18. box-shadow: #6E7849
    0px
    0px
    10px;
  19. color: #ffffff;
  20. display: inline-block;
  21. font-size: 4em;
  22. margin: auto;
  23. padding: 15px;
  24. text-decoration: none;
  25. text-shadow: #000000
    5px
    5px
    15px;
  26. transition: all 0.5s ease;
  27. }
  28. .button:hover {
  29. padding: 15px;
  30. }
时间： 2024-12-24 04:25:47

CSS3按钮选择器：设计网页链接平滑的按钮的相关文章

用户体验设计:网页中的确定和取消按钮

网页制作Webjx文章简介:我们常常在执行一个动作时,会被要求确认一下,这时候往往给出两个按钮,"确定"和"取消"."取消"按钮往往不会单独出现,而是与"确定","保存"之类的操作同时出现. "取消"(cancel,stop)和"撤消"(undo),看起来很像是同一回事,用起来似乎也差不多.但是两者在使用上还是有些差别,体验上也略有不同. 一. 取消键与撤消键 我们常

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页. CSS3属性选择器 下面是CSS3的属性选择器的语法,及使用. 元素名字[元素类型="类型名字"]:选择器名字{ 属性:值: 属性:值: } 在元素类型匹配时,就可以使用类似正则的匹配

以用户为中心的设计:网页确认框的用户体验设计

文章描述:以用户为中心的设计:网页确认框的用户体验设计. 确认框,顾名思义,对关键的用户行为进行确认,比如"询问是否删除","告知已删除".根据网上的观察,发现有的网站对确认框的设计缺乏合理性.本文谈谈自己的思考. 类别 根据触发目的,确认框分为两类:询问和告知. 询问 转推的确认框 询问,类似 Javascript 里的 confirm(),即:是否去做? 告知 Flickr 的告知 告知,类似 Javascript 里的 alert(),即:做的状态. 必要性

DreamWeaver设计网页之应用CSS样式表技巧两则

css|dreamweaver|技巧|设计|网页|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"

如何设计完美的行为引导按钮

行为引导按钮是你,作为网站设计师,希望你的用户点击的按钮.它们通常是一个下载.注册或出售的链接. Seth Godin (The Big Red Fez)称这类按钮为香蕉,而你的用户就是那些猴子.目标是,猴子能在3秒钟内找到香蕉(在他们放弃和离开以前)."强迫自己设计的每一个网页,只有一个主要目标.这就是香蕉.把它做的大些,把它做成蓝色(或红色) ,让他醒目". 本文讨论如果设计完美的"行为引导"按钮,并展示30个比较棒的行为引导按钮设计. 如何设计完美的行为引导按

网页制作 用FrongPage设计网页花样

设计|网页 技术在进步,思维在发展,网页上的花样当然也要一天天地赶时髦了.在"滚动字符"."跑马灯"已成平常的今天,网页上还能变出新花样吗? 制作鼠标指针指在上面时会变化的动态按钮 在FrontPage中通过选单命令:"insert(插入)"〉"active elements(active单元)"〉"hover botton(动态按钮)",可以制作动态效果的按钮.但是,这种按钮效果是基于javaapplet

网站制作初学解惑之怎样设计网页

初学|设计|网页 怎样设计网页? 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了-- 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了. 其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作.正所谓"功夫在诗外",网页设计中最重要的东西,并非在软件的应用上,而是在我们对网页设计的理解以及设计制作的水平上,在于我们自身的美感以

网页制作最常见问题：怎样设计网页

设计|网页|问题 怎样设计网页 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了-- 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了. 其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作.正所谓"功夫在诗外",网页设计中最重要的东西,并非在软件的应用上,而是在我们对网页设计的理解以及设计制作的水平上,在于我们自身的美感以及

入门：HTML设计网页中的字体的问题

设计|网页|问题 你可能正建立自己在网上的家-WEB页,又或者它已经被你安置在网络某一角里.无论出于什么目的,你都希望有更多的指导,告诉你该如何更好的布置家. 在目前许多的指导中,他们都在诉说,应该加一点声音或者一个说话的场地.的确我们都需要它,但我希望关心更多WEB家里底层的东西,比如如何把字体弄的漂亮些,或者让页面颜色变的活泼些,让访问者增加"看欲",还有更多你曾经都没有关注的细微之处.今天,我们首先来探讨页面的字体. 一.HTML中定义字体 字体的确是很好打交道的,一开始制作页面