CSSだけで作られた3Dの爆破ボタン [CODEPEN]

CSSだけで作られた3Dの爆破ボタン [CODEPEN]
このエントリーをはてなブックマークに追加
PR

3D CSS “DROP THE BOMB” BUTTON

DEMO 表示

CSSだけで作れれた爆破ボタンです
立体的に見えて、さらにボタンをクリックするとボタンを押したかのようになります

inputタグを使って作らているので送信ボタン等にも使えそうです

 

– CODE –

HTML

<h2>3D CSS "DROP THE BOMB" BUTTON</h2>

 
<input type="button" class="button" value="drop
the
bomb" />
<link async href="http://fonts.googleapis.com/css?family=Black%20Ops%20One" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
 
 
<h4>CSS generated with
 </br><strong>enjoycss.com</strong></br> http://enjoycss.com/3j/9#background</h4>

 

CSS

html{
 background-image:url(http://enjoycss.com/bg-img/custom/23959-em3zjf.png);
 text-align: center;
 color: rgba(0,0,0,0.7);
}

h2,h4{
 font-family:arial;
 text-align: center;
}

h4{
 font-weight: normal;
 font-size:1em;
 line-height:1.9em;
}

strong{
 font-size:1.6em;
 
 color:#c0392b;
}


/******** generated with enjoyCSS *******/


.button {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 width: 128px;
 height: 128px;
 cursor: pointer;
 top: 0;
 border: 1px solid #B21522;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 font: normal normal normal 20px/1.1 "Black Ops One", Helvetica, sans-serif;
 color: rgba(255,255,255,0.9);
 text-align: center;
 white-space: pre;
 background: -webkit-radial-gradient( 50% 50% , ellipse closest-side, rgba(255,255,255,0.2) 0, rgba(0,0,0,0) 100%), #C91826;
 background: -moz-radial-gradient( 50% 50% , ellipse closest-side, rgba(255,255,255,0.2) 0, rgba(0,0,0,0) 100%), #C91826;
 background: radial-gradient( 50% 50% , ellipse closest-side, rgba(255,255,255,0.2) 0, rgba(0,0,0,0) 100%), #C91826;
 background-repeat: no-repeat;
 background-position: 0 100%;
 -webkit-background-size: 158px 142px;
 background-size: 158px 142px;
 -webkit-box-shadow: 1px 16px 10px 5px rgba(0,0,0,0.2) , 0 14px 0 0 #000000 , 4px 8px 15px 4px rgba(0,0,0,0.4) , 5px 1px 5px 0 rgba(255,255,255,0.2) inset, 5px -4px 5px 0 rgba(255,255,255,0.2) inset, -2px 3px 6px 0 rgba(0,0,0,0.2) inset;
 box-shadow: 1px 16px 10px 5px rgba(0,0,0,0.2) , 0 14px 0 0 #000000 , 4px 8px 15px 4px rgba(0,0,0,0.4) , 5px 1px 5px 0 rgba(255,255,255,0.2) inset, 5px -4px 5px 0 rgba(255,255,255,0.2) inset, -2px 3px 6px 0 rgba(0,0,0,0.2) inset;
 text-shadow: 0 -1px 0 rgba(40,40,40,0.6) ;
 -webkit-transition: all 40ms 0 cubic-bezier(0.6, -0.28, 0.735, 0.04);
 -moz-transition: all 40ms 0 cubic-bezier(0.6, -0.28, 0.735, 0.04);
 -o-transition: all 40ms 0 cubic-bezier(0.6, -0.28, 0.735, 0.04);
 transition: all 40ms 0 cubic-bezier(0.6, -0.28, 0.735, 0.04);
 -moz-transform: rotateX(35deg) scaleX(1) scaleY(1) scaleZ(1) translateY(15px) translateZ(40px) ;
 -webkit-transform: rotateX(35deg) scaleX(1) scaleY(1) scaleZ(1) translateY(15px) translateZ(40px) ;
 transform: rotateX(35deg) scaleX(1) scaleY(1) scaleZ(1) translateY(15px) translateZ(40px) ;
 outline:none;
}

.button:hover {
 background: -webkit-radial-gradient( 50% 50% , ellipse closest-side, rgba(255,255,255,0.28) 0, rgba(0,0,0,0) 100%), #a80008;
 background: -moz-radial-gradient( 50% 50% , ellipse closest-side, rgba(255,255,255,0.28) 0, rgba(0,0,0,0) 100%), #a80008;
 background: radial-gradient( 50% 50% , ellipse closest-side, rgba(255,255,255,0.28) 0, rgba(0,0,0,0) 100%), #a80008;
 -webkit-box-shadow: 1px 16px 10px 5px rgba(0,0,0,0.2) , 0 14px 0 0 #000000 , 4px 8px 15px 4px rgba(0,0,0,0.4) , 5px 1px 5px 0 rgba(255,255,255,0.2) inset, 5px -4px 5px 0 rgba(255,255,255,0.2) inset, -2px 2px 6px 0 rgba(0,0,0,0.2) inset;
 box-shadow: 1px 16px 10px 5px rgba(0,0,0,0.2) , 0 14px 0 0 #000000 , 4px 8px 15px 4px rgba(0,0,0,0.4) , 5px 1px 5px 0 rgba(255,255,255,0.2) inset, 5px -4px 5px 0 rgba(255,255,255,0.2) inset, -2px 2px 6px 0 rgba(0,0,0,0.2) inset;
 -webkit-transition: all 0 0 cubic-bezier(0.42, 0, 0.58, 1);
 -moz-transition: all 0 0 cubic-bezier(0.42, 0, 0.58, 1);
 -o-transition: all 0 0 cubic-bezier(0.42, 0, 0.58, 1);
 transition: all 0 0 cubic-bezier(0.42, 0, 0.58, 1);
}

.button:active {
 position: relative;
 top: 6px;
 background: -webkit-radial-gradient( 50% 50% , ellipse closest-side, rgba(255,255,255,0.2) 0, rgba(0,0,0,0) 100%), #c60009;
 background: -moz-radial-gradient( 50% 50% , ellipse closest-side, rgba(255,255,255,0.2) 0, rgba(0,0,0,0) 100%), #c60009;
 background: radial-gradient( 50% 50% , ellipse closest-side, rgba(255,255,255,0.2) 0, rgba(0,0,0,0) 100%), #c60009;
 -webkit-box-shadow: 1px 5px 8px 4px rgba(0,0,0,0.4) , 0 7px 0 0 #000000 , 1px 2px 1px 1px rgba(0,0,0,0.6) , 3px 1px 5px 0 rgba(255,255,255,0.2) inset, 3px -6px 5px 0 rgba(255,255,255,0.2) inset, -1px 1px 4px 0 rgba(0,0,0,0.2) inset;
 box-shadow: 1px 5px 8px 4px rgba(0,0,0,0.4) , 0 7px 0 0 #000000 , 1px 2px 1px 1px rgba(0,0,0,0.6) , 3px 1px 5px 0 rgba(255,255,255,0.2) inset, 3px -6px 5px 0 rgba(255,255,255,0.2) inset, -1px 1px 4px 0 rgba(0,0,0,0.2) inset;
 -webkit-transition: all 40ms 0 cubic-bezier(0.42, 0, 0.58, 1);
 -moz-transition: all 40ms 0 cubic-bezier(0.42, 0, 0.58, 1);
 -o-transition: all 40ms 0 cubic-bezier(0.42, 0, 0.58, 1);
 transition: all 40ms 0 cubic-bezier(0.42, 0, 0.58, 1);
}
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)