We can change effect according us.<\/p>\n
{HTML}<\/strong> {CSS}<\/strong><\/p>\n 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":11},"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/31373"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/773"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=31373"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/31373\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=31373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=31373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=31373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n
\n<p>Click to activate.<\/p>
\n<p> <\/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
\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\"](\"\/blog\/wp-ttn-blog\/uploads\/2016\/01\/3dEffectbuttonimg.jpg\")
<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"