WindowsXPライクなボタンをCSS3とSass(Compass)で作ろう #Sass

これが実際のXPのボタン

こんなの作ってみよう。

xplike.scss

input {
    padding: 5px 30px;
    color: #020167;
    font-weight: bold;
    background-color: rgb(252,252,250);
    @include background(linear-gradient(top, rgba(252,252,250,1) 0%,rgba(236,235,230,1) 100%));
    @include border-radius(3px);
    border: 1px solid #003c73;
    @include box-shadow(
        1px 0 0 #e6e1db,
        0 -1px 0 #e6e1db,
        -1px 0 0 #e6e1db,
        0 1px 0 #e6e1db,
        2px 0 0 #bcd4f6 inset,
        0 1px 0 #bcd4f6 inset,
        -2px 0 0 #bcd4f6 inset,
        0 -1px 0 #bcd4f6 inset
    );

    &:active {
        background-color: rgb(236,235,230);
        @include background(linear-gradient(top, rgba(236,235,230,1) 0%,rgba(252,252,250,1) 100%));
    }
}

できあがったもの

瓜二つというわけにはいかなかったけど、まあこんなもんじゃないでしょうか。mixinで使い回そう！