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

実行結果

参考:Better Button and Nav Interactions

Take a Tour
Take a Tour

ソース

<h4>参考:<a href='http://www.darrenhoyt.com/2009/09/20/better-button-and-nav-interactions/' target='_blank'>Better Button and Nav Interactions</a></h4>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript">
$(function () {
    $('a#testbutton').hover(function() {
        $(this).fadeTo("fast", 1);
    }, function() {
        $(this).fadeTo("fast", .85);
    });
});
</script>
<style type="text/css">
#dark {
    background-color:#333;
    border:1px solid #000;
    margin:20px auto; padding:20px;
    color:#fff;
    overflow:hidden;
}
#light{
    background-color:#fff;
    border:1px solid #dedede;
    margin:20px auto; padding:20px;
    overflow:hidden;
}
.testbutton,
.testbutton:visited {
    display:block;
    background:url(/content/img/css/simple_button.png) repeat-x;
    width:200px;
    margin:0 5px; padding:10px 0;
    text-align:center;
    border:1px solid #608925;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.8);
    font-weight:bold;
    text-transform:uppercase;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    color:#FFF!important;
    text-decoration:none;
    opacity:.85;
    vertical-align:middle;
    float:left;
}
.testbutton:hover {
    border-color:#49671d;
}
.testbutton:active {
    background-position:0 -200px;
    padding:11px 0 9px;
    text-shadow:0 1px 0 rgba(0, 0, 0, 0.8);
}
</style>

<div id="light">
    <a href="#" class="testbutton">Take a Tour</a>
    <input type="button" class="testbutton" value="Input Button" />
    <button class="testbutton">Button</button>
</div>
<div id="dark">
    <a href="#" class="testbutton">Take a Tour</a>
    <input type="button" class="testbutton" value="Input Button" />
    <button class="testbutton">Button</button>
</div>

polarized women