Forked from: tetsuwo's 凹んだ感じのボタン - Hollow Button CSS3 View Diff (1) forked: 凹んだ感じのボタン - Hollow Button CSS3 yoshimana Follow 2014-04-15 19:53:54 License: MIT License Fork0 Fav0 View1034 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 2 lines HTML 39 lines CSS 217 lines forked: 凹んだ感じのボタン - Hollow Button CSS3 // 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> 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author yoshimana URLhttp://web310.net Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/xQlA/js"></script> button hollow user_interface Discussion Questions on this code? Tags button hollow user_interface