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

  • 相关阅读:
    本月时间按天显示
    微信小程序----当前时间的时段选择器插件(今天、本周、本月、本季度、本年、自定义时段)
    vuex进行传值
    echart 自定义 formatter
    git 登录流程
    Java学习-反射
    mysql数据类型char、varchar、text的一些区别
    微信小程序踩坑记录
    Rancher、Helm、HelmFile
    句子迷 2015_01_10
  • 原文地址:https://www.cnblogs.com/shuaixf/p/2260709.html
Copyright © 2011-2022 走看看