3D Κουμπί twitter με hover εφέ

TetsiTech

Ένα πολύ όμορφο 3D Κουμπί με το σύμβολο του twitter που όταν πάμε επάνω του, τότε αυτό μεγεθύνεται.

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα. Αντικαταστήστε τα κόκκινα γράμματα με τη δική σας σελίδα σας στο twitter και πατήστε [Αποθήκευση]. (Δε χρειάζεται να βάλετε τίτλο στο gadget)

<style type="text/css">
.twitterBtn {
box-sizing: border-box;
 width: 145px;
 height: 145px;
 border-radius: 100px;
 display: block;
 position: relative;
 margin: 50px auto;
 border: 12px solid #fff;
 box-shadow: inset 0 0 50px rgba(0,0,0,0.2) ,0 0 10px rgba(0,0,0,0.5); 
 background: #dfdfdf;
 transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

.twitterBtn:hover {
  background: #00f5fe;
  transition: all 0.5s ease-in-out;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;

  transform: scale(1.1);
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     -ms-transform: scale(1.1);
     -o-transform: scale(1.1);

  box-shadow: inset 0 0 50px rgba(0,147,152,0.8),0 0 20px rgba(0,147,152,0.8);
}

.twitterBtnIcon {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2KMs76I7MV6CosBTpb8z1UCJnKPheechyphenhyphenjRO8RgLPj21aIUQ5pRSaKafVBlWhue-7qQ3hLA-KeihOL5gLL-trv-LkCqtSwyeZXQkZuiFdO8JbZYsxaJtLdmTGHYITP0D8mb84og2J1Mw/s320/twitter.png) no-repeat;
  width: 100px;
  height: 74px;
  position: absolute;
  top: 20px;
  left: 10px;
}
/* by Tetsi */
</style><div style="text-align: center;">
<a class="twitterBtn" href="https://twitter.com/TetsiWorld" target="_blank">
<span class="twitterBtnIcon"></span>
</a></div>