Τρίτη 29 Οκτωβρίου 2013

Enter Button. Κλειδί εισόδου σε μια Στατική Αρχική Σελίδα του Blogger

 Σε ένα "εξώφυλλο" του Blogger, όταν δεν υπάρχει menu, απαραίτητο gadget-ακι είναι ένα κουμπί εισόδου στο περιεχόμενο. Ένα κουμπάκι που παίζει το ρόλο του κλειδιού της εξώπορτας. Μπορεί όμως να χρησιμοποιηθεί και για άλλες επιλογές αφού μας δίνει τη δυνατότητα να το ονομάσουμε κιόλας.



<style>
a.redButton{
 display: inline-block;
 width:50px;
 height: 50px;
 background-color:red;
 text-transform: uppercase;
 position:relative;
 padding:15px;
 line-height:50px;
 text-align:center;
 text-decoration: none !important;
 font-weight:bold;
 color:#fff;
 font-size:14px;
 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
 bottom:0;
 margin:0;
  
 transition:0.15s linear;
 -moz-transition:0.15s linear;
 -webkit-transition:0.15s linear;
  
 box-shadow:0 5px 0 darkred,0 0 10px rgba(0,0,0,0.3) inset, 8px 10px 4px rgba(0,0,0,0.4);
 -moz-box-shadow:0 5px 0 darkred,0 0 10px rgba(0,0,0,0.3) inset, 8px 10px 4px rgba(0,0,0,0.4);
 -webkit-box-shadow:0 5px 0 darkred,0 0 10px rgba(0,0,0,0.3) inset, 8px 10px 4px rgba(0,0,0,0.4);
  
 border-radius:50%;
 -moz-border-radius:50%;
 -webkit-border-radius:50%;
}
 
a.redButton:active{
 bottom:-5px;
  
 box-shadow:0 0 0 darkred,0 0 20px rgba(0,0,0,0.5) inset;
 -moz-box-shadow:0 0 0 darkred,0 0 20px rgba(0,0,0,0.5) inset;
 -webkit-box-shadow:0 0 0 darkred,0 0 20px rgba(0,0,0,0.5) inset;
}
 
#buttonContainer{
 padding:140px;
 text-align: center;
}
</style>
 
<div id="buttonContainer">
 
   <a href="http://YOURBLOG.blogspot.com/search/label?max-results=7" class="redButton" id="push">Enter!</a>
 
  </div>
Τοποθετήστε στη θέση του YOURBLOG το όνομα του blog σας

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

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