forked: 凹んだ感じのボタン - Hollow Button CSS3 - jsdo.it

Readme
JavaScript 2 lines
HTML 39 lines
CSS 217 lines

forked: 凹んだ感じのボタン - Hollow Button CSS3

<div id="container">
    <div class="hollow-button hollow-type-facebook">
        <div class="hollow-button-inner">
            <a href="javascript:void(0);">
                <span class="hollow-button-icon"><img src="http://jsrun.it/assets/7/O/d/m/7Odm0.png"></span>
                <span class="hollow-button-border"></span>
                <span class="hollow-button-text">
                    <span class="hollow-button-text-strong">Facebook</span>
                    <span>でログイン</span>
                </span>
            </a>
        </div>
    </div>
    <div class="hollow-button hollow-type-twitter">
        <div class="hollow-button-inner">
            <a href="javascript:void(0);">
                <span class="hollow-button-icon"><img src="http://jsrun.it/assets/s/R/a/o/sRaol.png"></span>
                <span class="hollow-button-border"></span>
                <span class="hollow-button-text">
                    <span class="hollow-button-text-strong">Twitter</span>
                    <span>でログイン</span>
                </span>
            </a>
        </div>
    </div>
    <div class="hollow-button hollow-type-mixi">
        <div class="hollow-button-inner">
            <a href="javascript:void(0);">
                <span class="hollow-button-icon"><img src="http://jsrun.it/assets/q/h/H/b/qhHbA.png"></span>
                <span class="hollow-button-border"></span>
                <span class="hollow-button-text">
                    <span class="hollow-button-text-strong">mixi</span>
                    <span>でログイン</span>
                </span>
            </a>
        </div>
    </div>
</div>

forked: 凹んだ感じのボタン - Hollow Button CSS3

body {
    background-color: #eee;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#container {
    margin: 120px auto;
    text-align: center;
}

/* -- HOLLOW BUTTON -- */
.hollow-button {
    display: block;
    width: 210px;
    margin: .5em auto;
}
.hollow-button * {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    line-height: 1.0;
}
.hollow-button-inner {
    display: block;
    padding: 5px 5px 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4);
    -moz-box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4);
}
	.hollow-button a {
        display: block;
        position: relative;
        height: auto;
        padding: 10px 10px 4px;
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
        text-align: left;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        -webkit-text-shadow: 0 1px -1px rgba(0, 0, 0, .2);
        -moz-text-shadow: 0 1px -1px rgba(0, 0, 0, .2);
        text-shadow: 0 1px -1px rgba(0, 0, 0, .2);
        -webkit-box-shadow: 0 3px 0 #344975;
        -moz-box-shadow: 0 3px 0 #344975;
        box-shadow: 0 3px 0 #344975;
        background: -webkit-linear-gradient(top, #4a6aab, #3c5a98);
        background: -moz-linear-gradient(top, #4a6aab, #3c5a98);
        background: linear-gradient(top, #4a6aab, #3c5a98);
        background-color: #4a6aab\9;
	}
        .hollow-button-icon {	
            float: left;
            display: block;
            width: 47px;
            color: #0085b2;
            background-color: transparent;
            font-weight: normal;
        }
        .hollow-button-border {
            float: left;
            display: inline-block;
            width: 1px;
            height: 37px;
      		background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1));
      		background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1));
      		background-image: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1));
            box-shadow: 1px 0 1px rgba(255, 255, 255, .2);
            background-color: #3c5a98¥9;
        }
        .hollow-button-text {
            display: inline-block;
            text-align: left;
            font-weight: normal;
            font-size: 14px;
            padding-left: 10px;
        }
        .hollow-button-text-strong {
            display: block;
            font-size: 20px;
            margin-bottom: .2em;
        }
        .hollow-button a:hover {
            background: -webkit-linear-gradient(top, #4c6cad, #3e5c9a);
            background: -moz-linear-gradient(top, #4c6cad, #3e5c9a);
            background: linear-gradient(top, #4c6cad, #3e5c9a);
            background-color: #4c6cad¥9;
        }
        .hollow-button a:active {
            color: #eeeeee;
            -webkit-text-shadow: 0 -1px -1px rgba(0, 0, 0, .2);
            -moz-text-shadow: 0 -1px -1px rgba(0, 0, 0, .2);
            text-shadow: 0 -1px -1px rgba(0, 0, 0, .2);
            -webkit-box-shadow: inset 0 2px 0  rgba(0, 0, 0, .2);
            -moz-box-shadow: inset 0 2px 0  rgba(0, 0, 0, .2);
            box-shadow: inset 0 2px 0  rgba(0, 0, 0, .2);
            background: -webkit-linear-gradient(top, #3d5b99, #3c5a98);
            background: -moz-linear-gradient(top, #3d5b99, #3c5a98);
            background: linear-gradient(top, #3d5b99, #3c5a98);
            background-color: #3d5b99¥9;
            position: relative;
            top: 3px;
        }

.hollow-button a:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

/* FACEBOOK */
    .hollow-type-facebook a {
        -webkit-box-shadow: 0 3px 0 #344975;
        -moz-box-shadow: 0 3px 0 #344975;
        box-shadow: 0 3px 0 #344975;
        background: -webkit-linear-gradient(top, #4a6aab, #3c5a98);
        background: -moz-linear-gradient(top, #4a6aab, #3c5a98);
    }
        .hollow-type-facebook a:hover {
            background: -webkit-linear-gradient(top, #4f6fb5, #3e5d9c);
            background: -moz-linear-gradient(top, #4f6fb5, #3e5d9c);
        }
        .hollow-type-facebook a:active {
            color: #eeeeee;
            background: -webkit-linear-gradient(top, #3d5b99, #3c5a98);
            background: -moz-linear-gradient(top, #3d5b99, #3c5a98);
        }

/* TWITTER */
    .hollow-type-twitter a {
        -webkit-box-shadow: 0 3px 0 #006e90;
        -moz-box-shadow: 0 3px 0 #006e90;
        box-shadow: 0 3px 0 #006e90;
        background: -webkit-linear-gradient(top, #00a0d1, #008eb9);
        background: -moz-linear-gradient(top, #00a0d1, #008eb9);
    }
        .hollow-type-twitter a:hover {
            background: -webkit-linear-gradient(top, #03a7d9, #0497c3);
            background: -moz-linear-gradient(top, #03a7d9, #0497c3);
        }
        .hollow-type-twitter a:active {
            color: #eeeeee;
            background: -webkit-linear-gradient(top, #008eb9, #0092be);
            background: -moz-linear-gradient(top, #008eb9, #0092be);
        }

/* mixi */
    .hollow-type-mixi a {
        -webkit-box-shadow: 0 3px 0 #7c6c40;
        -moz-box-shadow: 0 3px 0 #7c6c40;
        box-shadow: 0 3px 0 #7c6c40;
        background: -webkit-linear-gradient(top, #ad9553, #a0894b);
        background: -moz-linear-gradient(top, #ad9553, #a0894b);
    }
        .hollow-type-mixi a:hover {
            background: -webkit-linear-gradient(top, #b69d59, #a38d4d);
            background: -moz-linear-gradient(top, #b69d59, #a38d4d);
        }
        .hollow-type-mixi a:active {
            color: #eeeeee;
            background: -webkit-linear-gradient(top, #a0894b, #a38d4d);
            background: -moz-linear-gradient(top, #a0894b, #a38d4d);
        }

/* everevo */
    .hollow-type-everevo a {
        -webkit-box-shadow: 0 3px 0 #cc7a00;
        -moz-box-shadow: 0 3px 0 #cc7a00;
        box-shadow: 0 3px 0 #cc7a00;
        background: -webkit-linear-gradient(top, #ffa217, #ff9900);
        background: -moz-linear-gradient(top, #ffa217, #ff9900);
    }
        .hollow-type-everevo a:hover {
            background: -webkit-linear-gradient(top, #ffa620, #ff9e0c);
            background: -moz-linear-gradient(top, #ffa620, #ff9e0c);
        }
        .hollow-type-everevo a:active {
            color: #eeeeee;
            background: -webkit-linear-gradient(top, #f09000, #ff9900);
            background: -moz-linear-gradient(top, #f09000, #ff9900);
        }

/* normal */
    .hollow-type-normal a {
        color: #fff;
        -webkit-box-shadow: 0 5px 0 #bd2a00;
        -moz-box-shadow: 0 5px 0 #bd2a00;
        box-shadow: 0 5px 0 #bd2a00;
        background: -webkit-linear-gradient(top, #ff6300, #ff3e00);
        background: -moz-linear-gradient(top, #ff6300, #ff3e00);
    }
        .hollow-type-normal a:hover {
            background: -webkit-linear-gradient(top, #ff6e12, #fe470c);
            background: -moz-linear-gradient(top, #ff6e12, #fe470c);
        }
        .hollow-type-normal a:active {
            color: #eeeeee;
            background: -webkit-linear-gradient(top, #ee3a00, #ff3e00);
            background: -moz-linear-gradient(top, #ee3a00, #ff3e00);
        }
        .hollow-type-normal .hollow-button-text {
            float: none;
            width: auto;
            margin: 0;
            font-size: 24px;
            font-weight: bold;
            line-height: 50px;
            text-align: center;
        }

// forked from tetsuwo's "凹んだ感じのボタン - Hollow Button CSS3" http://jsdo.it/tetsuwo/rUlX <div id="container"> <div class="hollow-button hollow-type-facebook"> <div class="hollow-button-inner"> <a href="javascript:void(0);"> <span class="hollow-button-icon"><img src="http://jsrun.it/assets/7/O/d/m/7Odm0.png"></span> <span class="hollow-button-border"></span> <span class="hollow-button-text"> <span class="hollow-button-text-strong">Facebook</span> <span>でログイン</span> </span> </a> </div> </div> <div class="hollow-button hollow-type-twitter"> <div class="hollow-button-inner"> <a href="javascript:void(0);"> <span class="hollow-button-icon"><img src="http://jsrun.it/assets/s/R/a/o/sRaol.png"></span> <span class="hollow-button-border"></span> <span class="hollow-button-text"> <span class="hollow-button-text-strong">Twitter</span> <span>でログイン</span> </span> </a> </div> </div> <div class="hollow-button hollow-type-mixi"> <div class="hollow-button-inner"> <a href="javascript:void(0);"> <span class="hollow-button-icon"><img src="http://jsrun.it/assets/q/h/H/b/qhHbA.png"></span> <span class="hollow-button-border"></span> <span class="hollow-button-text"> <span class="hollow-button-text-strong">mixi</span> <span>でログイン</span> </span> </a> </div> </div> </div> body { background-color: #eee; padding: 0; margin: 0; overflow: hidden; } #container { margin: 120px auto; text-align: center; } /* -- HOLLOW BUTTON -- */ .hollow-button { display: block; width: 210px; margin: .5em auto; } .hollow-button * { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Helvetica, Arial, Verdana, sans-serif; font-weight: bold; line-height: 1.0; } .hollow-button-inner { display: block; padding: 5px 5px 8px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); -moz-box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); } .hollow-button a { display: block; position: relative; height: auto; padding: 10px 10px 4px; color: #ffffff; font-weight: bold; text-decoration: none; text-align: left; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; -webkit-text-shadow: 0 1px -1px rgba(0, 0, 0, .2); -moz-text-shadow: 0 1px -1px rgba(0, 0, 0, .2); text-shadow: 0 1px -1px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 3px 0 #344975; -moz-box-shadow: 0 3px 0 #344975; box-shadow: 0 3px 0 #344975; background: -webkit-linear-gradient(top, #4a6aab, #3c5a98); background: -moz-linear-gradient(top, #4a6aab, #3c5a98); background: linear-gradient(top, #4a6aab, #3c5a98); background-color: #4a6aab\9; } .hollow-button-icon { float: left; display: block; width: 47px; color: #0085b2; background-color: transparent; font-weight: normal; } .hollow-button-border { float: left; display: inline-block; width: 1px; height: 37px; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1)); background-image: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1)); box-shadow: 1px 0 1px rgba(255, 255, 255, .2); background-color: #3c5a98¥9; } .hollow-button-text { display: inline-block; text-align: left; font-weight: normal; font-size: 14px; padding-left: 10px; } .hollow-button-text-strong { display: block; font-size: 20px; margin-bottom: .2em; } .hollow-button a:hover { background: -webkit-linear-gradient(top, #4c6cad, #3e5c9a); background: -moz-linear-gradient(top, #4c6cad, #3e5c9a); background: linear-gradient(top, #4c6cad, #3e5c9a); background-color: #4c6cad¥9; } .hollow-button a:active { color: #eeeeee; -webkit-text-shadow: 0 -1px -1px rgba(0, 0, 0, .2); -moz-text-shadow: 0 -1px -1px rgba(0, 0, 0, .2); text-shadow: 0 -1px -1px rgba(0, 0, 0, .2); -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2); -moz-box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2); background: -webkit-linear-gradient(top, #3d5b99, #3c5a98); background: -moz-linear-gradient(top, #3d5b99, #3c5a98); background: linear-gradient(top, #3d5b99, #3c5a98); background-color: #3d5b99¥9; position: relative; top: 3px; } .hollow-button a:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* FACEBOOK */ .hollow-type-facebook a { -webkit-box-shadow: 0 3px 0 #344975; -moz-box-shadow: 0 3px 0 #344975; box-shadow: 0 3px 0 #344975; background: -webkit-linear-gradient(top, #4a6aab, #3c5a98); background: -moz-linear-gradient(top, #4a6aab, #3c5a98); } .hollow-type-facebook a:hover { background: -webkit-linear-gradient(top, #4f6fb5, #3e5d9c); background: -moz-linear-gradient(top, #4f6fb5, #3e5d9c); } .hollow-type-facebook a:active { color: #eeeeee; background: -webkit-linear-gradient(top, #3d5b99, #3c5a98); background: -moz-linear-gradient(top, #3d5b99, #3c5a98); } /* TWITTER */ .hollow-type-twitter a { -webkit-box-shadow: 0 3px 0 #006e90; -moz-box-shadow: 0 3px 0 #006e90; box-shadow: 0 3px 0 #006e90; background: -webkit-linear-gradient(top, #00a0d1, #008eb9); background: -moz-linear-gradient(top, #00a0d1, #008eb9); } .hollow-type-twitter a:hover { background: -webkit-linear-gradient(top, #03a7d9, #0497c3); background: -moz-linear-gradient(top, #03a7d9, #0497c3); } .hollow-type-twitter a:active { color: #eeeeee; background: -webkit-linear-gradient(top, #008eb9, #0092be); background: -moz-linear-gradient(top, #008eb9, #0092be); } /* mixi */ .hollow-type-mixi a { -webkit-box-shadow: 0 3px 0 #7c6c40; -moz-box-shadow: 0 3px 0 #7c6c40; box-shadow: 0 3px 0 #7c6c40; background: -webkit-linear-gradient(top, #ad9553, #a0894b); background: -moz-linear-gradient(top, #ad9553, #a0894b); } .hollow-type-mixi a:hover { background: -webkit-linear-gradient(top, #b69d59, #a38d4d); background: -moz-linear-gradient(top, #b69d59, #a38d4d); } .hollow-type-mixi a:active { color: #eeeeee; background: -webkit-linear-gradient(top, #a0894b, #a38d4d); background: -moz-linear-gradient(top, #a0894b, #a38d4d); } /* everevo */ .hollow-type-everevo a { -webkit-box-shadow: 0 3px 0 #cc7a00; -moz-box-shadow: 0 3px 0 #cc7a00; box-shadow: 0 3px 0 #cc7a00; background: -webkit-linear-gradient(top, #ffa217, #ff9900); background: -moz-linear-gradient(top, #ffa217, #ff9900); } .hollow-type-everevo a:hover { background: -webkit-linear-gradient(top, #ffa620, #ff9e0c); background: -moz-linear-gradient(top, #ffa620, #ff9e0c); } .hollow-type-everevo a:active { color: #eeeeee; background: -webkit-linear-gradient(top, #f09000, #ff9900); background: -moz-linear-gradient(top, #f09000, #ff9900); } /* normal */ .hollow-type-normal a { color: #fff; -webkit-box-shadow: 0 5px 0 #bd2a00; -moz-box-shadow: 0 5px 0 #bd2a00; box-shadow: 0 5px 0 #bd2a00; background: -webkit-linear-gradient(top, #ff6300, #ff3e00); background: -moz-linear-gradient(top, #ff6300, #ff3e00); } .hollow-type-normal a:hover { background: -webkit-linear-gradient(top, #ff6e12, #fe470c); background: -moz-linear-gradient(top, #ff6e12, #fe470c); } .hollow-type-normal a:active { color: #eeeeee; background: -webkit-linear-gradient(top, #ee3a00, #ff3e00); background: -moz-linear-gradient(top, #ee3a00, #ff3e00); } .hollow-type-normal .hollow-button-text { float: none; width: auto; margin: 0; font-size: 24px; font-weight: bold; line-height: 50px; text-align: center; }