drew.d.lenhart

programming, software, technology, anything on my mind...

3D Buttons

2014/08/03

Check out what I like to call "punch" buttons. It has a slight 3D effect to it. This was made using the ::before psudo selector. Which is great for making a type of "layer". The ::before layer contains the 3D portion of the button.

clickme

Notice when you click it pushes down on the top layer? This is done by using the "top" attribute in both the :active and ::before selector. When the button is active it's pressing down that layer 7 pixels, while the ::before selector is moved up making it appear as a button press. Make sure your using "position:relative" in your :active state, and "position:absolute" in the ::before state. This is crucial in aiding in the button press. Examine the code below and experiment on your own!

HTML Structure:

<a href="#" class="punch">
Click me!
</a>

<a href="#" class="circle">
OK!
</a>

CSS Structure:

.punch {
color:#ffffff;
font-family: verdana, sans-serif;
font-size:14px;
font-weight:bold;
display:inline-block;
padding:10px 35px;
text-decoration:none;

border:2px solid #6682b5;

position:relative;

background:#6682b5;
background: linear-gradient(top, #86adf4, #6682b5);
background: -webkit-gradient(linear, left top, left bottom, from(#86adf4), to(#6682b5));
background: -moz-linear-gradient(top, #86adf4, #6682b5);
background: -o-linear-gradient(top, #86adf4, #6682b5);
filter: progid:DXImageTransform.Microsoft.
gradient(startColorstr='#86adf4', endColorstr='#6682b5');

-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
border-radius:6px;
}

.punch:hover {
background:#6682b5;
}

.punch:active {
top: 7px;

background: -webkit-gradient(linear, left top, left bottom, from(#6682b5), to(#86adf4));
background: -moz-linear-gradient(top, #6682b5, #86adf4);
background: linear-gradient(top, #6682b5, #86adf4);
background: -o-linear-gradient(top, #6682b5, #86adf4);
filter: progid:DXImageTransform.Microsoft.
gradient(startColorstr='#6682b5', endColorstr='#86adf4');
}

.punch::before {
background-color:#3C4F73;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;

padding-right:4px;
padding-bottom:4px;
left:-2px;
top:5px;
z-index:-1;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
border-radius:6px;
box-shadow: 1px 1px 3px #000000;
}

.punch:active::before {
top:-2px;
}

-Originally published on snowytech.com - 9/04/12