Application Express: создание CSS-кнопки

Создание три кнопки вместо cтандартных в Apex:

1. Home -> Application Builder -> Application 101 -> Shared Components -> Templates -> Button:
   
    1.1  Definition (для первой кнопки):
   

    <span class="buttons">  
    <a href="#LINK#" class="positive">  
     <img src="#IMAGE_PREFIX#themes/ThemeName/img/positive.png" alt=""/>  
      #LABEL#</a>  
    <span>  
   

    1.2 Definition (для второй кнопки):
   

    <span class="buttons">  
    <a href="#LINK#" class="negative">  
      <img src="#IMAGE_PREFIX#themes/ThemeName/img/negative.png" alt=""/>  
      #LABEL#</a>  
    </span>  
   

    1.3 Definition (для третьей кнопки):
   

    <span class="buttons">  
      <a href="#LINK#" class="regular">  
      #LABEL#</a>  
    </span>  
   

2. Создать css-файл для описания кнопки:
   

    .buttons a, .buttons button{  
      display:block;  
      float:left;  
      margin:0 7px 0 0;  
      background-color:#f5f5f5;  
      border:1px solid #dedede;  
      border-top:1px solid #eee;  
      border-left:1px solid #eee;  
      font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;  
      font-size:12px;  
      line-height:130%;  
      text-decoration:none;  
      font-weight:bold;  
      color:#565656;  
      cursor:pointer;  
      padding:5px 10px 6px 7px; /* Links */  
    }  
    .buttons button{  
      width:auto;  
      overflow:visible;  
      padding:4px 10px 3px 7px; /* IE6 */  
    }  
    .buttons button[type]{  
      padding:5px 10px 5px 7px; /* Firefox */  
      line-height:17px; /* Safari */  
    }  
    *:first-child+html button[type]{  
      padding:4px 10px 3px 7px; /* IE7 */  
    }  
    .buttons button img, .buttons a img{  
      margin:0 3px -3px 0 !important;  
      padding:0;  
      border:none;  
      width:16px;  
      height:16px;  
    }  
    /* STANDARD */  
    button:hover, .buttons a:hover{  
      background-color:#dff4ff;  
      border:1px solid #c2e1ef;  
      color:#336699;  
    }  
    .buttons a:active{  
      background-color:#6299c5;  
      border:1px solid #6299c5;  
      color:#fff;  
    }  
    /* POSITIVE */  
    button.positive, .buttons a.positive{  
      color:#529214;  
    }  
    .buttons a.positive:hover, button.positive:hover{  
      background-color:#E6EFC2;  
      border:1px solid #C6D880;  
      color:#529214;  
    }  
    .buttons a.positive:active{  
      background-color:#529214;  
      border:1px solid #529214;  
      color:#fff;  
    }  
    /* NEGATIVE */  
    .buttons a.negative, button.negative{  
      color:#d12f19;  
    }  
    .buttons a.negative:hover, button.negative:hover{  
      background:#fbe3e4;  
      border:1px solid #fbc2c4;  
      color:#d12f19;  
    }  
    .buttons a.negative:active{  
      background-color:#d12f19;  
      border:1px solid #d12f19;  
      color:#fff;  
    }  
    /* REGULAR */  
    button.regular, .buttons a.regular{  
      color:#336699;  
    }  
    .buttons a.regular:hover, button.regular:hover{  
      background-color:#dff4ff;  
      border:1px solid #c2e1ef;  
      color:#336699;  
    }  
    .buttons a.regular:active{  
      background-color:#6299c5;  
      border:1px solid #6299c5;  
      color:#fff;  
    }  
   

3. Загрузить данный файл на Web server (аналогично, тому как делается в Интеграции Oracle ApEx и extJS ).
4. Загрузить следующие картинки в #IMAGE_PREFIX#themes/ThemeName/img:
   positive.png
   negative.png
5. Получаются такие кнопки: