Μετάβαση στο κύριο περιεχόμενο

Αναρτήσεις

Εμφάνιση αναρτήσεων με την ετικέτα Buttons

Christmas Themed Button

*Πάμε να δούμε ένα κουμπί του ταιριάζει παντού λόγο εορτών.
*Όταν ο κέρσορας είναι πάνω στο κουμπί αλλάζει χρώμα θα το δούμε και στο live link που είναι στο τέλος μετά τον κώδικα!
CODE:
<style>
/*
Christmas Button
/* www.foulscode.com
IE9+, Chrome, Firefox, Opera
известные баги:
# нет снежной шапки на input[type="button"]
# Opera: на input не работает text-shadow
# Opera: на input при клике border окрашивается в черный цвет
# Opera: из-за конического градиента в фоне, в Опере сильно тормозят transitions (Opera 12.12)
# IE + Opera: В Опере при нажатии на input, в ИЕ при нажатии на input и button текст кнопки смещается вправо вниз
# IE9: не поддерживается transition и text-shadow
P.S. через border-image не прокатило: не поддерживается ИЕ, в Опере частичная поддержка.
*/

.button {
display: inline-block;
-webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
       box-sizing:border-box;
min-width:100px;
padding: 22px 33px;
font-family: 'Lobster', cursive;
font-size: 26px;
line-…

Animated CSS3 Buttons

<style>
    /* www.Foulscode.com */
    body {
padding-top: 50px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
background: #353535;
color: #FFF;
}
.jumbotron h1 {
color: #353535;
}
span.icon {
margin: 0 5px;
color: #D64541;
}
h2 {
color: #BDC3C7
}
.mrng-60-top {
margin-top: 60px;
}
/* Global Button Styles */
    /* www.Foulscode.com */
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.…

Share Social networking buttons

Αντιγραφή τον παρακάτω κώδικα:


<script type="text/javascript" src="http://100widgets.com/js_data.php?id=255"></script>

DEMO

NeatNait social share buttons

Αντιγραφή επικόλληση τον παρακάτω κώδικα:

<style>
/* foulscode.blogspot.gr */
@import url(http://fonts.googleapis.com/css?family=Dosis);

body{
  background:#ddd;
  margin:20px;
  text-align:center;
}

ul{
  list-style:none;
  margin:auto;
  display:inline-block;
}

ul li{
  width:110px;
  height:130px;
  float:left;
  background:#FDFCFA;
  position:relative;
  transition: all .5s ease;
  overflow:hidden;
}

li h1{
  font-family: 'Dosis', sans-serif;
  font-weight:normal;
  text-align:center;
  line-height:60px;
  font-size:30px;
  transition: all .5s ease;
}

li:hover{
  box-shadow:inset 0 0 10px #2D2D2D; 
}

li:hover h1{
  transform: scale(.8) translateY(-5px);
}

li:hover .button{
  transform: translateY(0px);
}

li .button{ 
  height:50px;
  transform: translateY(25px);
  text-align:center;
  padding:5px 10px;
  padding-bottom:50px;
  color:white;
  width:100%;
  position:absolute;
  bottom:0;
  background:#2D2D2D;
  box-sizing:border-box;
  transition: all .5s .5s ease;

Download Buttons

Μερικά κουμπιά για το blog και site σας!

Αντιγραφή επικόλληση τον παρακάτω κώδικα:
<style>
/* foulscode.blogspot.gr */
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
  font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: white;
}
.container {
  margin: 30px auto;
  width: 580px;
  text-align: center;
}
.container > .button { margin: 12px; }
.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 36px;
  line-height: 35px;
  padding: 0 20px;
  font-size: 13px;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
  background-clip: padding-box;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(…

CSS Buttons

Μερικά όμορφα Buttons για site και blog.

Αντιγραφή επικόλληση τον παρακάτω κώδικα:



<style>
/* foulscode.blogspot.gr */
body { text-align: center; padding: 40px; background: #F5F5F5; }
.container { width: 500px; text-align: center; margin: auto;}
.copyright { margin-top: 50px; font-size: 12px; text-transform: uppercase; }
.copyright a { text-decoration: none; padding: 5px;background: #c0392b; color: #FFFFFF; }
.copyright a:hover { background: transparent; color: #c0392b; }
.button {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding-right: 30px;
  padding-left: 70px;
  position: relative;
  background-color:rgb(41,127,184);
  color:rgb(255,255,255);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;


  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  text-shadow:0px 1px 0px rgba(0,0,0,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,…