PHP & JavaScript Room :: 設置サンプル

実行結果

参照:CSS3 Button Generator

ソース

<h4>参照:<a href='http://css3button.net/'>CSS3 Button Generator</a></h4>
<style type="text/css">
#dark,
#light{
    width:210px;
}
#dark {
    background-color:#333;
    border:1px solid #000;
    margin:20px auto; padding:20px;
    color:#fff;
}
#light{
    background-color:#fff;
    border:1px solid #dedede;
    margin:20px auto; padding:20px;
}
.button {
    position:relative; /* PIE.htc対策 */
    border:3px solid #ffffff;
    font-size:14px;
    text-decoration:none;
    color:#333!important;
    vertical-align:middle;
    margin:0; padding:10px 20px;
    font-weight:bold;
    background:#f7ff00;
    background:-moz-linear-gradient(top,#f7ff00 0%,#ccc);
    background:-webkit-gradient(linear, left top, left bottom,from(#f7ff00),to(#ffbf00));
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow:2px 2px 3px #ccc;
    -webkit-box-shadow:2px 2px 3px #ccc;
    box-shadow:2px 2px 3px #ccc;
    text-shadow:1px 1px 1px #fff;
    behavior:url(pie/PIE.htc);
}
#dark .button {
    -moz-box-shadow:2px 2px 3px #000;
    -webkit-box-shadow:2px 2px 3px #000;
    box-shadow:2px 2px 3px #000;
}
</style>
<div id="light">
    <a href="#" class="button">ボタン</a> 
    <input type="button" class="button" value="Button" />
</div>
<div id="dark">
    <a href="#" class="button">ボタン</a> 
    <input type="button" class="button" value="Button" />
</div>

polarized women