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

実行結果

参照:Nice CSS3 buttons

ソース

<h4>参照:<a href='http://www.htmldrive.net/items/show/795/Nice-CSS3-buttons.html' target='_blank'>Nice CSS3 buttons</a></h4>
<style type="text/css">
#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, .button:visited {
    border:0;
    background:#222 url(/content/img/css/overlay.png) repeat-x; 
    display:inline-block; 
    padding:5px 10px 6px; 
    color:#fff; 
    text-decoration:none;
    -moz-border-radius:6px; 
    -webkit-border-radius:6px;
    -moz-box-shadow:0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.6);
    text-shadow:0 -1px 1px rgba(0,0,0,0.25);
    border-bottom:1px solid rgba(0,0,0,0.25);
    position:relative;
    cursor:pointer
}
.button:hover                            { background-color:#111; color:#fff; }
.button:active                            { top:1px; }
.small.button, .small.button:visited             { font-size:11px}
.button, .button:visited,
.medium.button, .medium.button:visited         { font-size:13px; 
    font-weight:bold; 
    line-height:1; 
    text-shadow:0 -1px 1px rgba(0,0,0,0.25); 
}

.large.button, .large.button:visited {
    font-size:14px; 
    padding:8px 14px 9px;
}

.super.button, .super.button:visited {
    font-size:34px;
    padding:8px 14px 9px;
}
.pink.button, .magenta.button:visited        { background-color:#e22092; }
.pink.button:hover                            { background-color:#c81e82; }
.green.button, .green.button:visited        { background-color:#91bd09; }
.green.button:hover                            { background-color:#749a02; }
.red.button, .red.button:visited            { background-color:#e62727; }
.red.button:hover                            { background-color:#cf2525; }
.orange.button, .orange.button:visited        { background-color:#ff5c00; }
.orange.button:hover                        { background-color:#d45500; }
.blue.button, .blue.button:visited            { background-color:#2981e4; }
.blue.button:hover                            { background-color:#2575cf; }
.yellow.button, .yellow.button:visited        { background-color:#ffb515; }
.yellow.button:hover                        { background-color:#fc9200; }
</style>

<div id="light">
    <p>白背景</p>
    <p><a class="button">Button</a> <a class="super button pink">Pink Button</a></p>
    <p><a class="small button green">Green Button</a> <a class="small button blue">Blue Button</a> <a class="small button red">Red Button</a> <a class="small button orange">Orange Button</a> <a class="small button yellow">Yellow Button</a></p>
    <p><a class="midium button green">Green Button</a> <a class="midium button blue">Blue Button</a> <a class="midium button red">Red Button</a> <a class="midium button orange">Orange Button</a> <a class="midium button yellow">Yellow Button</a></p>
    <p><a class="large button green">Green Button</a> <a class="large button blue">Blue Button</a> <a class="large button red">Red Button</a> <a class="large button orange">Orange Button</a> <a class="large button yellow">Yellow Button</a></p>
    <p>
        <input type="button" class="small button green" value="Input Button" /> 
        <input type="button" class="midium button blue" value="Input Button" /> 
        <input type="button" class="large button red" value="Input Button" />
    </p>
    <p>
        <button class="small button orange">Button</button> 
        <button class="midium button yellow">Button</button> 
        <button class="large button pink">Button</button>
    </p>
</div>

<div id="dark">
    <p>黒背景</p>
    <p><a class="button">Button</a> <a class="super button pink">Pink Button</a></p>
    <p><a class="small button green">Green Button</a> <a class="small button blue">Blue Button</a> <a class="small button red">Red Button</a> <a class="small button orange">Orange Button</a> <a class="small button yellow">Yellow Button</a></p>
    <p><a class="midium button green">Green Button</a> <a class="midium button blue">Blue Button</a> <a class="midium button red">Red Button</a> <a class="midium button orange">Orange Button</a> <a class="midium button yellow">Yellow Button</a></p>
    <p><a class="large button green">Green Button</a> <a class="large button blue">Blue Button</a> <a class="large button red">Red Button</a> <a class="large button orange">Orange Button</a> <a class="large button yellow">Yellow Button</a></p>
    <p>
        <input type="button" class="small button green" value="Input Button" /> 
        <input type="button" class="midium button blue" value="Input Button" /> 
        <input type="button" class="large button red" value="Input Button" />
    </p>
    <p>
        <button class="small button orange">Button</button> 
        <button class="midium button yellow">Button</button> 
        <button class="large button pink">Button</button>
    </p>
</div>

polarized women