ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Πέμπτη, 13 Ιουνίου 2013

CSS 3D ΚΟΥΜΠΙ ΜΕ ΠΑΡΑΠΟΜΠΗ

Μπορούμε να τα προσθέσουμε σαν gadget στο μπλοκ μας από τον μπλόκερ.



1.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>CSS3 Punch Button</title>
 <meta name="description" content="CSS Punch Button">
 <style>

 /* punch
*******************************************************************************/
button.punch {
 background: #4162a8;
 border-top: 1px solid #38538c;
 border-right: 1px solid #1f2d4d;
 border-bottom: 1px solid #151e33;
 border-left: 1px solid #1f2d4d;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 color: #fff;
 font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
 line-height: 1;
 margin-bottom: 10px;
 padding: 10px 0 12px 0;
 text-align: center;
 text-shadow: 0px -1px 1px #1e2d4d;
 width: 150px;
 -webkit-background-clip: padding-box; }

button.punch:hover {
 -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 cursor: pointer; }

button.punch:active {
 -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 margin-top: 8px; }
 </style>
</head>

<body>
 <div>
 <button class="punch">punch</button>
 </div>

</body>
</html>



Μπορούμε να ρυθμίσουμε πολλούς παραμέτρους και να τα φέρουμε στα μέτρα μας



2.

<html lang="en">
 <style>
 /****************************************************
 *  Push Button
 *****************************************************/
.push_button{
 position:relative;
 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:5px;
 border:solid 1px #D94E3B;
 background:#cb3b27;
 text-align:center;
 padding:20px 30px;
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 -webkit-box-shadow: 0px 9px 0px #84261a;
        -moz-box-shadow: 0px 9px 0px #84261a;
        box-shadow: 0px 9px 0px #84261a;
}

.push_button:active{
    -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
    box-shadow: 0px 2px 0px #84261a;
    position:relative;
    top:7px;
}

</style>

</html>

<body>
<a href=" " class="push_button">
 Push Me
</a>
</body>


Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.