© Style-5.net
 

CSS3だけで作る立体サブミットボタン

CSS3だけで作るリアルな立体サブミットボタン

DEMOページ


.demo_sbm {
    background-color:#2FA4CF;
    font-family:"Century Gothic", Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
    font-size:14px;
    text-decoration:none;
    color:#fff;
    width: 100px;
    position:relative;
    padding:10px 20px;
    padding-right:50px;
    background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #166782, 0px 10px 5px #999;
}
.demo_sbm:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
    box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #166782, 0px 5px 3px #999;
}
.demo_sbm::before {
    background-color:#166782;
    background-image:url(../images/right_arrow.png);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:20px;
    height:20px;
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-9px;
    border-radius: 50%;
    box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}
.demo_sbm:active::before {
    top:50%;
    margin-top:-12px;
    box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

※各数値、color、要素はお好みで。22行目に矢印等のimageを入れると尚Good!