{"id":31373,"date":"2016-01-13T17:53:18","date_gmt":"2016-01-13T12:23:18","guid":{"rendered":"https:\/\/2thenew.xyz\/blog\/?p=31373"},"modified":"2016-12-19T15:37:04","modified_gmt":"2016-12-19T10:07:04","slug":"how-to-create-button-in-3d-effect-with-the-help-of-css3","status":"publish","type":"post","link":"https:\/\/2thenew.xyz\/blog\/how-to-create-button-in-3d-effect-with-the-help-of-css3\/","title":{"rendered":"HOW TO CREATE BUTTON IN 3D EFFECT WITH THE HELP OF CSS3"},"content":{"rendered":"

How we can use CSS Transition to make it look like a button is 3D when you press it. For this we use the box-shadow property which starts off with a high value and when the we press the button for change the box-shadow value to be lower making it look like the button is being push down.<\/p>\n

To achieve this look we are use the CSS active selector<\/a> which becomes active when the visitor click on the attached element.<\/p>\n

We can change effect according us.<\/p>\n

{HTML}<\/strong>
\n
\n<p>Click to activate.<\/p>
\n<p>&nbsp<\/p>
\n<p>
\n<button class=\"bt-facebook\"><\/button>
\n<button class=\"bt-twitter\"><\/button>
\n<button class=\"bt-in\"><\/button>
\n<button class=\"bt-vimeo\"><\/button>
\n<\/p>
\n <\/code><\/p>\n

{CSS}<\/strong><\/p>\n


\n@font-face {
\nfont-family: 'socialfont';
\nsrc: url('http:\/\/mediaashley.com\/MyFont.ttf') format('truetype');
\nfont-weight: normal;
\nfont-style: normal;
\n 
\n}
\n<\/code>
\n 
\nbody
\nbackground: #ddd;
\nwidth: 100%;
\nmargin: 72px;
\n} <\/code>
\n
\nbutton {x
\nwidth:102px;
\nheight:102px;
\ndisplay:inline-block;
\nfont-family: Helvetica;
\nfont-size: 15px;
\nfont-weight: bold;
\ncolor:#fff;
\ntext-decoration: none;
\ntext-transform: uppercase;
\ntext-align: center;
\ntext-shadow:2px 2px 0px #000fff;
\npadding-top:7px;
\nmargin-left: auto;
\nmargin-right: auto;
\nleft:30px;
\nposition:relative;
\ncursor:pointer;
\nborder: none;
\nbackground: #444ddd;
\nbackground-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
\nborder-radius: 6px;
\nbox-shadow: inset 0px 2px 0px #8389e1, 0px 6px 0px 0px #000fff, 0px 10px 5px #999;
\n} <\/code>
\nbutton:active {
\ntop:3px;
\nbox-shadow: inset 0px 1px 0px #000fff, 0px 2px 0px 0px #000fff, 0px 5px 3px #000fff;
\n}<\/code>
\nbutton:before {
\nfont-family: 'socialfont';
\nfont-size: 52px;
\nline-height: 1em;
\nfont-weight: normal;
\ncolor: #fff;
\ncontent:\"\\F020\";
\nwidth:86px;
\nheight:92px;
\ndisplay:block;
\nposition:absolute;
\npadding-top:11px;
\ntop:10px;
\ntext-shadow: 1px 1px 3px #000fff;
\n 
\n}<\/code>
\n 
\nbutton:active:before {
\ntop: 8px;
\nfont-size: 52px;
\ntext-shadow: 0px 4px 0px #000fff, 0px 6px 1px #000fff\/*, 3px 0px 1px #000fff, 3px 3px 1px #000fff, -2px 0px 1px #68cff2*\/;
\n}<\/code>
\n 
\n.bt-twitter:before {
\ncontent:\"\\F021\";
\n}<\/code>
\n.bt-in:before {
\ncontent:\"\\F022\";
\n}<\/code>
\n.bt-vimeo:before{
\ncontent:\"\\F024\";
\n}<\/code><\/p>\n

\"3dEffectbuttonimg\"<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

How we can use CSS Transition to make it look like a button is 3D when you press it. For this we use the box-shadow property which starts off with a high value and when the we press the button for change the box-shadow value to be lower making it look like the button is […]<\/p>\n","protected":false},"author":773,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":25,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-31373","post","type-post","status-publish","format-standard","hentry","category-technology"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t