edo1z blog

プログラミングなどに関するブログです

CSS3 ボタンつくってみた

スクリーンショット 2013-05-23 16.23.35

/************* ボタン ***************/
.btn {
    background: -moz-linear-gradient(top,#DFE9F5, #1D25F7 50%,#0020A3 50%,#0039FE);
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE9F5), color-stop(0.5,#1D25F7), color-stop(0.5,#0020A3), to(#0039FE));
    color: #FFF;
    font-size:16px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid #0033FF;
    -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    width: 40%;
    padding: 5px 0;
}
.btn:hover{
    background: -moz-linear-gradient(top,#EFF9F5, #2D35F7 50%,#1030B3 50%,#1049FE);
    background: -webkit-gradient(linear, left top, left bottom, from(#EFF9F5), color-stop(0.5,#2D35F7), color-stop(0.5,#1030B3), to(#1049FE));
    color: #FFF;
    font-size:16px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid #1144FF;
    -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    width: 40%;
    padding: 5px 0;
}
.btn:active {
    position:relative;
    top:1px;
}

参考: 5つの効果で作る、よく使うCSS3ボタンデザインサンプル集 CSS Button Generator