CSSでMSのリボンUI風のボタン

CSS3のgradientやbox-shadowを駆使して似たようなものを作ってみました。

→DEMO

本物は光沢のあるグラデーションだったりするのですが、面倒だったのでそこまでは再現していません。他にも少しずつ違う部分がありますが……。

ちなみに本物*1はこんな感じ↓

Firefox3.6、Chorme5で確認しました。IE8は角が四角くてグラデーションもなくてのっぺりした、大変残念な感じになりますが、まあIEなので仕方がない。とはいえ崩れはしません。あ、IE6はちょっと……。

コードはこんなんです。

/* outside */
.ribbon_ui-list {
    background-color: rgb(222, 232, 245);
    background-image: gradient(linear, left top, left bottom, from(rgb(222, 232, 245)), color-stop(.5, rgb(199, 216, 237)), to(rgb(222, 232, 245)));
    background-image: -moz-linear-gradient(rgb(222, 232, 245), rgb(199, 216, 237), rgb(222, 232, 245));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(222, 232, 245)), color-stop(.5, rgb(199, 216, 237)), to(rgb(222, 232, 245)));
    border: 1px solid rgb(186, 202, 217);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: inset 1px 1px 0 rgb(226, 234, 244), 1px 1px 0 rgb(226, 234, 244);
    -moz-box-shadow: inset 1px 1px 0 rgb(226, 234, 244), 1px 1px 0 rgb(226, 234, 244);
    -webkit-box-shadow: inset 1px 1px 0 rgb(226, 234, 244), 1px 1px 0 rgb(226, 234, 244);
    padding: 4px;
}

/* default button */
.ribbon_ui-button {
    background-color: rgb(200, 219, 238);
    background-image: gradient(linear, left top, left bottom, from(rgb(200, 219, 238)), color-stop(.5, rgb(192, 212, 237)), to(rgb(200, 219, 238)));
    background-image: -moz-linear-gradient(rgb(200, 219, 238), rgb(192, 212, 237), rgb(200, 219, 238));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(200, 219, 238)), color-stop(.5, rgb(192, 212, 237)), to(rgb(200, 219, 238)));
    border: 1px solid rgb(156, 185, 220);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: inset 1px 1px 0 rgb(213, 227, 241), inset -1px -1px 0 rgb(213, 227, 241);
    -moz-box-shadow: inset 1px 1px 0 rgb(213, 227, 241), inset -1px -1px 0 rgb(213, 227, 241);
    -webkit-box-shadow: inset 1px 1px 0 rgb(213, 227, 241), inset -1px -1px 0 rgb(213, 227, 241);
    color: rgb(21, 66, 139);
    padding: 1px 0;
}
.ribbon_ui-button:hover {
    background-color: rgb(255, 235, 172);
    background-image: gradient(linear, left top, left bottom, from(rgb(255, 235, 172)), color-stop(.5, rgb(255, 211, 98)), to(rgb(255, 235, 172)));
    background-image: -moz-linear-gradient(rgb(255, 235, 172), rgb(255, 211, 98), rgb(255, 235, 172));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 235, 172)), color-stop(.5, rgb(255, 211, 98)), to(rgb(255, 235, 172)));
    border-color: rgb(221, 207, 155);
}
.ribbon_ui-list .ribbon_ui-item .ribbon_ui-button:active {
    background-color: rgb(248, 184, 106);
    background-image: -moz-linear-gradient(rgb(248, 184, 106), rgb(252, 146, 61), rgb(248, 184, 106));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(248, 184, 106)), color-stop(.5, rgb(252, 146, 61)), to(rgb(248, 184, 106)));
    border-color: rgb(139, 118, 84);
    box-shadow: inset 0 5px 5px rgb(177, 144, 93);
    -moz-box-shadow: inset 0 5px 5px rgb(177, 144, 93);
    -webkit-box-shadow: inset 0 5px 5px rgb(177, 144, 93);
}
.ribbon_ui-button img {
    display: block;
    margin: auto;
}

/* vertical buttons group */
.ribbon_ui-v_button {
    display: inline-block;
    vertical-align: bottom;
}
.ribbon_ui-v_button .ribbon_ui-button {
    display: block;
    padding: 0;
    width: 100%;
}
.ribbon_ui-v_button .ribbon_ui-v_button-top {
    border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
}
.ribbon_ui-v_button .ribbon_ui-v_button-bottom {
    border-top-style: none;
    border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
}
.ribbon_ui-v_button-bottom-more_mark {
    font-size: .5em;
}
.ribbon_ui-v_button:hover .ribbon_ui-button {
    background-color: rgb(255, 255, 247);
    background-image: gradient(linear, left top, left bottom, from(rgb(255, 255, 247)), color-stop(.5, rgb(255, 241, 193)), to(rgb(255, 255, 247)));
    background-image: -moz-linear-gradient(rgb(255, 255, 247), rgb(255, 241, 193), rgb(255, 255, 247));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 247)), color-stop(.5, rgb(255, 241, 193)), to(rgb(255, 255, 247)));
    border-color: rgb(221, 207, 155);
    box-shadow: inset 1px 1px 0 rgb(255, 244, 217), inset -1px -1px 0 rgb(255, 244, 217);
    -moz-box-shadow: inset 1px 1px 0 rgb(255, 244, 217), inset -1px -1px 0 rgb(255, 244, 217);
    -webkit-box-shadow: inset 1px 1px 0 rgb(255, 244, 217), inset -1px -1px 0 rgb(255, 244, 217);
}
.ribbon_ui-v_button .ribbon_ui-v_button-top:hover {
    background-color: rgb(255, 235, 172);
    background-image: gradient(linear, left top, left bottom, from(rgb(255, 235, 172)), to(rgb(255, 211, 98)));
    background-image: -moz-linear-gradient(rgb(255, 235, 172), rgb(255, 211, 98));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 235, 172)), to(rgb(255, 211, 98)));
}
.ribbon_ui-v_button .ribbon_ui-v_button-bottom:hover {
    background-color: rgb(255, 235, 172);
    background-image: gradient(linear, left top, left bottom, from(rgb(255, 211, 98)), to(rgb(255, 235, 172)));
    background-image: -moz-linear-gradient(rgb(255, 211, 98), rgb(255, 235, 172));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 211, 98)), to(rgb(255, 235, 172)));
}

うわー見づらい……。

*1:MS Office Word 2007