Tech Time: 3D Animation Button

TRANSLATUM

Μία πολύ χρήσιμη online εφαρμογή είναι
το Translatum το οποίο μας βοηθά να μεταφράσουμε λέξεις και κείμενα μέσα από πάρα πολλά λεξικά!Δεν θέλει εγκατάσταση απλά πατήστε στην εικόνα για να μεταφερθείτε στην ιστοσελίδα του Translatum, επιλέξτε

ότι σας ενδιαφέρει και πατήστε Μετάφραση!

Παρασκευή 22 Ιουλίου 2016

3D Animation Button

Φίλες και φίλοι γεια σας, σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο
3D Animation Button και πως μπορούμε να το βάλουμε στο blog μας!Δεν έχει
καμμία σχέση με τα απλά κουμπιά, είναι με κώδικα Css και πιο φινετσάτο καθώς
διαθέτει και 3D animation effect με το πάτημα του κουμπιού!

Δείτε εδώ το παράδειγμα:

Το άλλο μου blog!

Για το εγκαταστήσετε και εσείς

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
........................................................................................................................................

<style>

a.css3dbutton {
    background: darkred; /* background color of button */
    color: white;
    text-decoration: none;
    font: bold 28px Arial; /* font size and style */
    position: relative;
        top: 0; /* anchor main button's position */
    bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
        margin-bottom: 12px;
    -moz-box-shadow: 0 -15px 5px darkred inset;
    -webkit-box-shadow: 0 -15px 5px darkred inset;
    box-shadow: 0 -15px 5px darkred inset;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a.css3dbutton, a.css3dbutton:after {
    display: inline-block;
    padding: 10px 15px; /* vertical and horizontal padding of button */
    -moz-border-radius: 8px/15px;
    -webkit-border-radius: 8px/15px;
    border-radius: 8px/15px;
    outline: none;
}

a.css3dbutton:after { /* pseudo element to construct 3D side of button */
    content: "";
    position: absolute;
    padding: 0;
    z-index: -1;
    bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
    left: 0;
    width: 100%;
    height: 100%;
    background: #6e0e0c; /* background color of 3D effect */
    -moz-box-shadow: 1px 0 3px gray;
    -webkit-box-shadow: 1px 0 3px gray;
    box-shadow: 1px 0 3px gray;
}

a.css3dbutton:hover {
    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    background: #bc3835; /* background color when mouse rolls over button */
}

a.css3dbutton:active {
    top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
    bottom: 0;
    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}

</style>

<a href="http://cris-dio8.blogspot.gr/"target="_blank" class="css3dbutton">Το άλλο μου blog!</a>

...................................................................................................................................................................
ΑΛΛΑΓΕΣ

http://cris-dio8.blogspot.gr/ -Εδώ βάζετε το δικό σας Link

Το άλλο μου blog! -Eδώ βάζετε τον δικό σας τίτλο για το κουμπί!

Όποιος θέλει αλλάζει κα τα σημειωμένα χρώματα του κουμπιού!

Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!!

Πηγή κώδικα
thanks to dynamicdrive.com

Edit by