• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    用滑动门技术设计按钮的图文教程
    本文为翻译文章,全文地址:http://diger.cn/article.asp?id=351
    原文地址:http://www.filamentgroup.com/lab/buttonElement/

    Particle Tree 最近发布了一篇文章描述了一种他们拿出的设计按钮元素的技术,对于那些不熟练的人来说,表格按键是出了名的难以定制。典型的解决方案是使用浏览器提供的默认按钮,或者是使用一个图形输入。当图形输入完成了需求结果时,它请求创建一个新的图形为每一个按钮用它的文本“Baked-in”(没有提及以hovers交换它)。

    尽管Particle Tree的技术提供了一种可靠的方案,它不能满足我们的需求。我们需要一种使用了滑动门技术的按钮,一种真正的HTML文本,不需要请求JavaScript转滚或者提交表格。满足这些条件就意味着input和anchor元素被排除了。很显然,按钮元素正是我们唯一的选择。下面的技术示范了一种使用滑动门技术的跨浏览器的按钮的技术。


    查看Demo     

    标签:
    复制代码 代码如下:

    button value="submit" class="submitBtn">span>Submit/span>/button> 

    CSS:

    程序代码
    复制代码 代码如下:

    button {  
      border:0;  
      cursor:pointer;  
      font-weight:bold;  
      padding:0 20px 0 0;  
      text-align:center;  

    button span {  
      position:relative;  
      display:block;  
      white-space:nowrap;  
      padding:0 0 0 20px;  

    /*blue buttons*/ 
    button.submitBtn {  
      background:url(images/btn_blue_right.gif) right no-repeat;  
      font-size:1.3em;  

    button.submitBtn span {  
      height:50px;  
      line-height:50px; 
      background:url(images/btn_blue_left.gif) left no-repeat; 
      color:#fff;  

    button.submitBtn:hover { 
        background:url(images/btn_blue_right_hover.gif) right no-repeat;  

    button.submitBtn:hover span { 
        background:url(images/btn_blue_left_hover.gif) left no-repeat;  


    CSS For IE6和IE7(有时候需要)

    复制代码 代码如下:

    button {  
      width:auto;  
      overflow:visible;  

    button span {  
      margin-top:1px;  


    就像你能看到的那样,每个状态使用了2个图片(总共4个图片)。进一步简化,可以将这些状态转化为两个。但这种想法的最初测试出现了不一致的结果。











    浏览器支持:
    IE6,IE7,Firefox(mac/pc),Safari,Opera,Camino等等。

    警告:为了使hover在IE6中有效,你将需要编写一个类触发器。尽管不像图片交换一样糟糕。
    上一篇:用css动态生成闪字的代码
    下一篇:用div+css解决出现水平滚动条问题
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    用滑动门技术设计按钮的图文教程 用,滑动,门,技术,设计,按钮,