zoukankan      html  css  js  c++  java
  • BEST TECHNIQUE TO STYLE A FLEXIBLE WEB BUTTON

    There are many ways to style a web button, for myself, I always use the same method. Today, we are going to demonstrate how to style a button from scratch. We are going to use this lovely design from favbulous PSD repository:

    Beautiful web button

    As you can see, this button comes with many colors and different button states. In this tutorial, we will use grey, red, blue and green colors. You see, if we cut all them out as an individual button, that's a lot of images! We have a solution here, that's right... we will be using CSS image spritetechnique in this tutorial. The main advantage of CSS sprite is - it reduces HTTP request by grouping all images into one, thus enhances website render speed.

    PREPARING IMAGE SPRITE

    Preparing an image sprite can be very tricky especially for button. First of all, we need to know that this button will be flexible, which means the width of button will expand according to the caption length. This is how we do it, we divide the button into two sections - body and tail. Then, We added extra width to the button body to 200px and move all the tails to the bottom. This is the result of our image sprite:

     

    STYLE IT UP

    Alright, we have the image sprite ready, now is the time to implement it. As we mentioned before, this button is divided into body and tail. In the context of HTML, body is used as the background forspan inside the a and tail is the background for a. Another illustration of how we combined it together.

     

    HTML
    <a href="#" class="button"><span>Submit</span></a>    
    <a href="#" class="button red"><span>Download</span></a>
    <a href="#" class="button blue"><span>Search</span></a>
    <a href="#" class="button green"><span>Demo</span></a>

    One thing about this tutorial though, we no longer make thing for IE6, because it sucks. We tested it on IE7, 8, 9, FF, Safari, Chrome and Opera. The reason we brought this out because we are using display: inline-block in the CSS which is not supported by IE6. However, to make sure it'll still look good in IE6, we gave it a fixed width to solve the problem.

    CSS
    a.button {
        background: transparent url('buttons.png') no-repeat right -384px;
        height:32px;
        display:inline-block;
        padding-right:23px;
        text-decoration:none;    
        font-family:arial;
        font-size:12px;        
        font-weight:700;        
        color:#555;        
    }
    a.button span {
        display: block;
         100%;
        height:32px;    
        padding-left:12px;
        line-height:25px;
        text-align:center;                
        background: transparent url('buttons.png') no-repeat left 0;
        text-shadow: 0px 0px 4px #fff;
    }
    a.button:hover {
        background-position: right -416px;
    }
    a.button:hover span {
        background-position: left -32px;
    }    
        
    a.button:active {
        background-position: right -448px;
    }
    a.button:active span {
        background-position: left -64px;            
    }            
    /*
    * Different color
    */
    /* red */
    a.button.red {
        background-position: right -480px;    
        color:#913944;
    }
    a.button.red span {
        background-position: left -96px;        
    }
        
    a.button.red:hover {
        background-position: right -512px;    
    }
    a.button.red:hover span {
        background-position: left -128px;        
    }
        
    a.button.red:active {
        background-position: right -544px;    
    }
    a.button.red:active span {
        background-position: left -160px;        
    }                
    /* blue */    
    a.button.blue {
        background-position: right -576px;    
        color:#42788e;
    }
    a.button.blue span {
        background-position: left -192px;        
    }
        
    a.button.blue:hover {
        background-position: right -608px;    
    }
    a.button.blue:hover span {
        background-position: left -224px;        
    }
        
    a.button.blue:active {
        background-position: right -640px;    
    }
    a.button.blue:active span {
        background-position: left -256px;        
    }                
    /* green */    
    a.button.green {
        background-position: right -672px;    
        color:#5d7731;
    }
    a.button.green span {
        background-position: left -288px;        
    }
        
    a.button.green:hover {
        background-position: right -704px;    
    }
    a.button.green:hover span {
        background-position: left -320px;        
    }
        
    a.button.green:active {
        background-position: right -736px;    
    }
    a.button.green:active span {
        background-position: left -352px;        
    }

    Some tweak to make it look consistent in IEs. Fixed width for IE6 because it doesn't support display: inline-block

    CSS
    <!--[if IE 6]>
    <style type="text/css">
    a.button {
    60px;
    }        
    </style>
    <![endif]-->
    <!--[if lte IE 7]>
    <style type="text/css">
    a.button {
        padding-right:11px;
    }        
    </style>
    <![endif]-->
    <!--[if IE]>
    <style type="text/css">
    a.button span {
        line-height:27px;
    }        
    </style>
    <![endif]-->   

    That's it. We have just make a flexible button which adapt to the caption length (Although 200px might be too short for you but I think it's long enough to meet most needs) and easy to switch between colors.

     

    I hope you get something out of this tutorial and we will be focus more on User Interface. If you want more free button PSD, browse around favbulous UI repository, we have more than 300++free PSD collection!

    转:http://favbulous.com/post/211/best-technique-to-style-a-flexible-web-button

  • 相关阅读:
    windows环境利用hexo+github搭建个人博客
    tf.matmul() 和tf.multiply() 的区别
    RuntimeError: Python is not installed as a framework. The Mac OS X backend will not be able to function correctly if Python is not installed as a framework. See the Python documentation for more infor
    tensorboard在Mac OS X系统环境下如何启动
    atom的使用
    PCA降维2
    PCA降维
    正态分布的介绍
    各种距离 欧式距离、曼哈顿距离、切比雪夫距离、闵可夫斯基距离、标准欧氏距离、马氏距离、余弦距离、汉明距离、杰拉德距离、相关距离、信息熵
    电脑中英文文件夹一般代表的含义 和 常见的后缀名的的意思
  • 原文地址:https://www.cnblogs.com/shuaixf/p/2260709.html
Copyright © 2011-2022 走看看