Web Analytics Made Easy - StatCounter
FoulsCode

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

10 Δεκεμβρίου 2016

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-height: 26px;
text-decoration: none;
color: #FFF;
text-shadow: 0 1px 2px rgba(0,0,0,0.75);
background: #5e0d0c;
outline: none;
border-radius: 15px;
border: 1px solid #4c0300;
box-shadow:
inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
inset 0 0 6px #a23227, /* inner glow */
inset 0 80px 80px -40px #ac3223, /* gradient */
1px 1px 3px rgba(0,0,0,0.75); /* shadow */
position: relative;
overflow: visible; /* IE9 & 10 */
-webkit-transition: 500ms linear;
  -moz-transition: 500ms linear;
    -o-transition: 500ms linear;
transition: 500ms linear;
}
.button::before {
content: '';
display: block;
position: absolute;
top: -7px;
left: -3px;
right: 0;
height: 23px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAXCAYAAACS5bYWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABFpJREFUeNrUV0tIo1cUvpkYjQ4xxSA6DxuNqG0dtaUKOgs3s6i0dFd3pSsXdjeIixakiGA34sZuXCkoONLFwJTK4GMYLYXg29gatTpiXurkbd7vv9/5ub+IxuhA7eiFQ5Kbc8/57ne/e87/ywRBYLdl3GG3aNwqsLJ0k0tLS+fmcnNzWUVFBVMoFGx2djarvLxcm5OTw+bm5iytra2xc4ExNjY27iqVyvvwK6CpeDzuCYVC1urq6qDA9UcfPp+PHR4esmAwKK6tr68/l5/8rgQ2Ozub1dbWyiYmJooaGxt/VqvV38jlchX9l0qlwoFA4DWS/RKLxRxFRUVf5+XlPcaaT2AP0sVPJBL2SCRiAPBpu93+vKamZo/Ae71eZjabWV1dXVqw7CKwp43ksrCw8Bhg7MJ/PLDZ5PHx8cz29vYT5JGD/bSYLgTrcDgYdk6siSc6NjZWDaAe4ZoHQL+cmZnRpZPnhWDpD8kw7uKo9ML/NMCsd2tr61vkzboMrEyv138M7TyLRqMWMBsX3sMgaZhMpp+AR5EJrCocDpuEGzKg4x8khs+CVWxubvZfR9JkMik4nU7BarUKLpeLmLsKuwIqTLynp4fqmIzASrqQT09Pf1VVVfX0KsWZ6uHBwQHTaDSsoKAgo6/H4xHLEcrVyRwuEisrKzs5XrrIVAVwiUVDKRRrL+YI32ewdVhMApuHWvcj6vids6J2u90MF4yBHUZNgKoEBaRBQalJqFSqtJfUYrGIlQX+ydXVVTN+u0tKSjQNDQ1axJVl2iTypebn55d7e3v/kqoDgZU1NTU9LCws/Py0M+2ekuGincxJ3yF+18jIyHJLS0slQJUWFxczrBeBE0vE5tHRkbixlZWVfSR8gTX/0P5gH7S1tX3Z3t7+BW8qAvwSfr8/jA0EIRM/qoFtampqbW9vTw+XA+ojUruVd3Z2tvb19T2TQFEim81GgVJoCvvj4+NLOJZgaWmpemdn5y3a6BbcnJDAw8HBwac6ne6eqCW5XDwB3qVSqM9/DAwMUNy/eVLabT7sI25qwgujThCBhWE+mAt2yNc4SQKSZrOQQE1HS22VJkmPAGTr7+//fX19fRk+Zgq0trbGeFAKEAQT98BSqKOj47vm5uaa/Px8JeIk4GcaHh6eWlxcfAU/A8xG67BxAX3fwdcbYUpSDJ06Z49Ak8ZC3OL8f3YiA4PBYKdLQ2AJ9OTk5GpXV9cQiCVh79M94QtlPLDUE/1gPNrd3f0W33W4cBoco48zQuy/IZYAMnGqlSc4c66L9JruQUaSARXeT8HGKzxAqFBekni6+h46+pMzGiJGMgTOJh1yU/KNEGDvZWvfBawkA9ppwGg0mrRa7SOI2g+gxOgbJIpdFpj72PnxSnPX8vqRxTURgBQWKisrH+GThOm+CtAzoK/9/Uiqq/6hoaHfdnd3jaOjo7/yY7yxbwqkWy3sQzpS2C6YirwvUJk0y7hurfyGRrnduPGvAAMASmo8wzeVwfsAAAAASUVORK5CYII=) no-repeat 0 0,
url(data:image/png;base64,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) no-repeat 50% 0,
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAXCAYAAACFxybfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAodJREFUeNrsVb1rWlEUv2pN/GqspKRSKFYXWzEloIWif0Fn6dJChQ7OQil0qd3EzcEpg0OgdHDr4CQODk7VRlLMEIVqApX4We0zflR9/Z1Ui4T34ksaaAYP/Hzc673n/M6550PG8zz73yKjn0wm83fDYDAwo9HINBrNnwOQg4MDs0ql2lQqlfdAWont7ng8Pjw+Ps44nc4G1pI9EXWaSOzt7TGO42aH5Pv7+08ajUZ0MBiUeXEZd7vdL5VK5fX29rZ+5tQiEmdxKrlcjsEYczgcynK5/BKKv/IXFNz/XiqVXkHdjUuRIA9SqdRD8or/R8Ez9fr9fqHVakUR4c2z0REjIQuHw2ZcrPBXLCA0RHTezEdHjIQqkUhEr9I4HOILhQLf6/VoOUFEvDMiQiToDx1Cdz+bzZ6bUFarlel0OkkVUK/XWbvdPoVer5fh3ntsfwJ+CJ2XA4p0Op1bpBgJyxDehQQ6nQ5DZXHBYDBZq9V+EhFUndnr9drEqoc2bwJbwGPgtohuVSwWe2Gz2TZMJpNgRKi6qtUqg2EWj8dTgUDgo0KhWPN4PC70EvXOzs67fD6/S6kiRIKeZA1YJ2MiJNbdbvfTUCjkV6vVK2hcDF8GI2w0GrGTkxM2HA5PDxaLxSOfz/cWEfk81X0XIMMFgJJ/srBjCgk8IdcfuVyuZ36//7nFYtkQyAMumUzuRiKRD0jMFLa+AZOpYwqgB/ziBVqmVBKUO7eAB/R0WG/Z7XaTVqtdbTabHJL6EK2djBaBPHA0NSqpbUsiMUeEBgpF4Q5AbZrmSJ/yEWgBTaBNHl9kdkgmMUeG7qwAq9PqovceTA3zlxlgsuswyuXsGsiSxJLEkoSY/BZgAEjRodi+uBruAAAAAElFTkSuQmCC) no-repeat 100% 0;
}
.button:hover {
background: #a61715;
text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 40px #FFF;
box-shadow:
inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
inset 0 0 6px #da3b2c, /* inner glow */
inset 0 80px 80px -40px #dd4330, /* gradient */
1px 1px 3px rgba(0,0,0,0.75); /* shadow */
}
.button:focus {
outline: none; /*FF*/
}
.button:active {
box-shadow:
inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
inset 0 0 6px #da3b2c, /* inner glow */
inset 0 80px 80px -40px #dd4330, /* gradient */
0px 1px 0px rgba(255,255,255,0.25); /* shadow */
-webkit-transition: 50ms linear;
  -moz-transition: 50ms linear;
    -o-transition: 50ms linear;
       transition: 50ms linear;
}

/* other styles */
html, body {
width:100%;
height: 100%;
}
.bg {
width: 100%;
height: 100%;
display: table;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkMzU0NDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNGExMTBjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #d35448 0%, #4a110c 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#d35448), color-stop(100%,#4a110c)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #d35448 0%,#4a110c 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #d35448 0%,#4a110c 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #d35448 0%,#4a110c 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #d35448 0%,#4a110c 100%); /* W3C */
}
.centerer {
display: table-cell;
vertical-align: middle;
text-align: center;
/* noise image */
background-image: url(data:image/png;base64,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);
}

/*
border-image не поддерживается в IE10 и плохо работает в Opera :(
border-image-source: url(data:image/png;base64,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);
border-image-slice: 23 34 23 44;
border-image-width: auto auto 0 auto;
border-image-outset: 5px 0px 0px 2px;
border-image-repeat: stretch;
*/
</style>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Christmas Button</title>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bg">
<div class="centerer">
<a href="#" class="button">Christmas Button</a>
</div>
</div>
</body>
</html>

Διαβάστε Περισσότερα »

31 Μαΐου 2016

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.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
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;
}
/* Victoria Buttons */
    /* www.Foulscode.com */
a.animated-button.victoria-one {
border: 2px solid #D24D57;
}
a.animated-button.victoria-one:after {
background: #D24D57;
-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.victoria-two {
border: 2px solid #D24D57;
}
a.animated-button.victoria-two:after {
background: #D24D57;
-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.victoria-three {
border: 2px solid #D24D57;
}
a.animated-button.victoria-three:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
height: 140%;
opacity: 1;
}
a.animated-button.victoria-four {
border: 2px solid #D24D57;
}
a.animated-button.victoria-four:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
-webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.victoria-four:hover:after {
opacity: 1;
height: 600% !important;
}
/* Sandy Buttons */
    /* www.Foulscode.com */
a.animated-button.sandy-one {
border: 2px solid #AEA8D3;
color: #FFF;
}
a.animated-button.sandy-one:after {
border: 3px solid #AEA8D3;
opacity: 0;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.sandy-one:hover:after {
height: 120% !important;
opacity: 1;
color: #FFF;
}
a.animated-button.sandy-two {
border: 2px solid #AEA8D3;
color: #FFF;
}
a.animated-button.sandy-two:after {
border: 3px solid #AEA8D3;
opacity: 0;
-moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
-webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.sandy-two:hover:after {
height: 600% !important;
opacity: 1;
color: #FFF;
}
a.animated-button.sandy-three {
border: 2px solid #AEA8D3;
color: #FFF;
}
a.animated-button.sandy-three:after {
border: 3px solid #AEA8D3;
opacity: 0;
-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.sandy-three:hover:after {
height: 400% !important;
opacity: 1;
color: #FFF;
}
a.animated-button.sandy-four {
border: 2px solid #AEA8D3;
color: #FFF;
}
a.animated-button.sandy-four:after {
border: 3px solid #AEA8D3;
opacity: 0;
-moz-transform: translateY(-50%) translateX(-50%) rotate(25deg);
-ms-transform: translateY(-50%) translateX(-50%) rotate(25deg);
-webkit-transform: translateY(-50%) translateX(-50%) rotate(25deg);
transform: translateY(-50%) translateX(-50%) rotate(25deg);
}
a.animated-button.sandy-four:hover:after {
height: 400% !important;
opacity: 1;
color: #FFF;
}
/* Gibson Buttons */
a.animated-button.gibson-one {
border: 2px solid #65b37a;
color: #FFF;
}
a.animated-button.gibson-one:after {
opacity: 0;
background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
background-size: 10px 10px;
-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.gibson-one:hover:after {
height: 600% !important;
opacity: 1;
color: #FFF;
}
a.animated-button.gibson-two {
border: 2px solid #65b37a;
color: #FFF;
}
a.animated-button.gibson-two:after {
opacity: 0;
background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
background-size: 10px 10px;
-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.gibson-two:hover:after {
height: 600% !important;
opacity: 1;
color: #FFF;
}
a.animated-button.gibson-three {
border: 2px solid #65b37a;
color: #FFF;
}
a.animated-button.gibson-three:after {
opacity: 0;
background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
background-size: 10px 10px;
-moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
a.animated-button.gibson-three:hover:after {
height: 600% !important;
opacity: 1;
color: #FFF;
}
a.animated-button.gibson-four {
border: 2px solid #65b37a;
color: #FFF;
}
a.animated-button.gibson-four:after {
opacity: 0;
background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
background-size: 10px 10px;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%));
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.gibson-four:hover:after {
height: 600% !important;
opacity: 1;
color: #FFF;
}
/* Thar Buttons */
a.animated-button.thar-one {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-one:hover {
color: #000 !important;
background-color: transparent;
text-shadow: none;
}
a.animated-button.thar-one:hover:before {
bottom: 0%;
top: auto;
height: 100%;
}
a.animated-button.thar-one:before {
display: block;
position: absolute;
left: 0px;
top: 0px;
height: 0px;
width: 100%;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-two {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-two:hover {
color: #000 !important;
background-color: transparent;
text-shadow: ntwo;
}
a.animated-button.thar-two:hover:before {
top: 0%;
bottom: auto;
height: 100%;
}
a.animated-button.thar-two:before {
display: block;
position: absolute;
left: 0px;
bottom: 0px;
height: 0px;
width: 100%;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-three:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nthree;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-four {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-four:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nfour;
}
a.animated-button.thar-four:hover:before {
right: 0%;
left: auto;
width: 100%;
}
a.animated-button.thar-four:before {
display: block;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
/* www.Foulscode.com */
  </style>

  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Animated CSS3 Buttons - Foulscode
</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="http://designify.me/code-snippets/animated-buttons/css/btns.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="http://designify.me/tutorials/flat-buttons-with-animated-hover-effects/">Animated Buttons Demo</a> </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://designify.me/tutorials/flat-buttons-with-animated-hover-effects/">Go to Foulscode.com</a></li>
      </ul>
    </div>
    <!--/.navbar-collapse -->
  </div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron text-center">
  <div class="container">
 
    <h1>Animated CSS3 Buttons</h1>
    <p style="color:#888">More resources at <a href="http://Foulscode.com/">Foulscode.com</a></p>
 
  </div>
</div>
<div class="container">
  <!-- Example row of columns -->

  <div class="row">
    <div class="col-md-12 text-center">
      <h2>Victoria</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button victoria-one">Sign up</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button victoria-two">Login</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button victoria-three">Register</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button victoria-four">Learn more</a> </div>
  </div>

  <div class="row">
    <div class="col-md-12 text-center">
      <h2 class="mrng-60-top">Sandy</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-one">Sign up</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-two">Login</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-three">Register</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-four">Learn more</a> </div>
  </div>



  <div class="row">
    <div class="col-md-12 text-center">
      <h2 class="mrng-60-top">Gibson</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button gibson-one">Sign up</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button gibson-two">Login</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button gibson-three">Register</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button gibson-four">Learn more</a> </div>
  </div>



  <div class="row">
    <div class="col-md-12 text-center">
      <h2 class="mrng-60-top">Thar</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-one">Sign up</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-two">Login</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-three">Register</a> </div>
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-four">Learn more</a> </div>
  </div>



  <footer>
    <hr  style="margin-top:50px;" />
    <p class="text-center">Created with <span class="icon"><i class="fa fa-heart fa-lg"></i></span> by <a href="http://foulscode.com/" target="_blank"> Foulscode.com</a></p>
  </footer>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

LIVE DEMO

Διαβάστε Περισσότερα »

17 Ιανουαρίου 2015

23 Δεκεμβρίου 2014

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;
  line-height:25px;
  font-size:15px;
}

.button i{
  font-size:20px;
}

.button.blue{
  background:#24C9FF;
}

.button.pink{
  background:#E12148;
}

.button.green{
  background:#71F264;
}






.neatnait-love{
  width:250px;
  margin:auto;
  margin-top:5em;
  font-weight:300;
  font-family: 'Roboto', sans-serif;
  text-shadow:0 5px 20px #000;
  color:white;
  background:#111;
  padding:2em 6em 2em 4em;
  position:fixed;
  bottom:10%;
  left:50%;
  margin-left:-125px;
  box-sizing:border-box;
}

a{
  text-decoration:none;
  color:#f06;
  border-bottom:1px solid white;
  padding-bottom:5px;
  transition:border .5s ease;
}

a:hover{
  border-color:#111;
  color:#f06;
  border-bottom:4px solid white;
}
/* foulscode.blogspot.gr */
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<ul>
  <li>
    <h1>23</h1>
    <div class="button">
      <i class="fa fa-github"></i>
      <br>
      another star?
    </div>
  </li>
  <li>
    <h1>93</h1>
    <div class="button blue">
      <i class="fa fa-twitter"></i>
      <br>
      go n' tweet it!
    </div>
  </li>
  <li>
    <h1>52</h1>
    <div class="button pink">
      <i class="fa fa-pinterest"></i>
      <br>
      let's pin this!
    </div>
  </li>
  <li>
    <h1>61</h1>
    <div class="button green">
      <i class="fa fa-vine"></i>
      <br>
      revine now!
    </div>
  </li>
  <li>
    <h1>239</h1>
    <div class="button">
      <i class="fa fa-google-plus"></i>
      <br>
      plus one?
    </div>
  </li>
</ul>



<h3 class="neatnait-love">
  made with love at
  @<a href="http://foulscode.blogspot.com">foulscode</a>
</h3>



DEMO
Διαβάστε Περισσότερα »

1 Δεκεμβρίου 2013

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(0, 0, 0, 0.25);
}
.button:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
.button:hover:before {
  background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
}
.button:active {
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.button:active:before {
  content: none;
}
.button-green {
  background: #5ca934;
  border-color: #478228 #478228 #3c6f22;
  background-image: -webkit-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
  background-image: -moz-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
  background-image: -o-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
  background-image: linear-gradient(to bottom, #69c03b, #5ca934 66%, #54992f);
}
.button-green:active {
  background: #5ca934;
  border-color: #3c6f22 #478228 #478228;
}
.button-red {
  background: #d5452f;
  border-color: #ae3623 #ae3623 #992f1f;
  background-image: -webkit-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
  background-image: -moz-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
  background-image: -o-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
  background-image: linear-gradient(to bottom, #da5c48, #d5452f 66%, #c73d28);
}
.button-red:active {
  background: #d5452f;
  border-color: #992f1f #ae3623 #ae3623;
}
.button-blue {
  background: #1097e6;
  border-color: #0d78b6 #0d78b6 #0b689e;
  background-image: -webkit-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
  background-image: -moz-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
  background-image: -o-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
  background-image: linear-gradient(to bottom, #25a5f0, #1097e6 66%, #0f8ad3);
}
.button-blue:active {
  background: #1097e6;
  border-color: #0b689e #0d78b6 #0d78b6;
}
.button-orange {
  background: #f4902a;
  border-color: #df770c #df770c #c76a0a;
  background-image: -webkit-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
  background-image: -moz-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
  background-image: -o-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
  background-image: linear-gradient(to bottom, #f69f47, #f4902a 66%, #f38617);
}
.button-orange:active {
  background: #f4902a;
  border-color: #c76a0a #df770c #df770c;
}
.button-pink {
  background: #e8367f;
  border-color: #d31865 #d31865 #bc165a;
  background-image: -webkit-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
  background-image: -moz-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
  background-image: -o-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
  background-image: linear-gradient(to bottom, #eb5190, #e8367f 66%, #e62473);
}
.button-pink:active {
  background: #e8367f;
  border-color: #bc165a #d31865 #d31865;
}
.button-gray {
  background: #47494f;
  border-color: #2f3034 #2f3034 #232427;
  background-image: -webkit-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
  background-image: -moz-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
  background-image: -o-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
  background-image: linear-gradient(to bottom, #55585f, #47494f 66%, #3d3f44);
}
.button-gray:active {
  background: #47494f;
  border-color: #232427 #2f3034 #2f3034;
}
.button-darkblue {
  background: #3b5ca0;
  border-color: #2d477b #2d477b #263c68;
  background-image: -webkit-linear-gradient(top, #4369b6, #3b5ca0 66%, #365391);
  background-image: -moz-linear-gradient(top, #4369b6, #3b5ca0 66%, #365391);
  background-image: -o-linear-gradient(top, #4369b6, #3b5ca0 66%, #365391);
  background-image: linear-gradient(to bottom, #4369b6, #3b5ca0 66%, #365391);
}
.button-darkblue:active {
  background: #3b5ca0;
  border-color: #263c68 #2d477b #2d477b;
}
.button-purple {
  background: #9966cb;
  border-color: #8040be #8040be #733aab;
  background-image: -webkit-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -moz-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -o-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: linear-gradient(to bottom, #a87dd3, #9966cb 66%, #8f57c6);
}
.button-purple:active {
  background: #9966cb;
  border-color: #733aab #8040be #8040be;
}
/* foulscode.blogspot.gr */
</style>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Download Buttons</title>
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <div class="container">
    <a href="URL" class="button button-green">Download</a>
    <a href="URL" class="button button-red">Download</a>
    <a href="URL" class="button button-blue">Download</a>
    <a href="URL" class="button button-orange">Download</a><br><a href="#" class="button button-pink">Download</a>
    <a href="URL" class="button button-purple">Download</a>
    <a href="URL" class="button button-darkblue">Download</a>
    <a href="URL" class="button button-gray">Download</a>
  </div>
</body>
</html>



Για την επιλογή ένα από τα κουμπιά πχ θέλουμε να κρατήσουμε το πράσινο κρατάμε τον κώδικα:

<a href="URL" class="button button-green">Download</a>

Αφού αντικαταστήσετε το URL με το url του αρχείο που θέλετε μπορείτε να πατήσετε αποθήκευση.





Διαβάστε Περισσότερα »

2 Ιουλίου 2013

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,Positive=true)";zoom:1;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
  -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
  box-shadow:0px 2px 2px rgba(0,0,0,0.2);
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}
.button span {
  position: absolute;
  left: 0;
  width: 50px;
  background-color:rgba(0,0,0,0.5);

  -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid  rgba(0,0,0,0.15);
}
.button:hover span, .button.active span {
  background-color:rgb(0,102,26);
  border-right: 1px solid  rgba(0,0,0,0.3);
}
.button:active {
  margin-top: 2px;
  margin-bottom: 13px;
  -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
box-shadow:0px 1px 0px rgba(255,255,255,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true);
}
.button.orange {
  background: #FF7F00;
}
.button.purple {
  background: #8e44ad;
}
.button.turquoise {
  background: #1abc9c;
}
.button.red {
  background: #e74c3c;
}
/* foulscode.blogspot.gr */
</style>
<div class="container">
<a href="URL" class="button"><span></span>Look I'm a button</a>
<a href="URL" class="button orange active"><span></span>Look I'm a Active Button</a>
<a href="URL" class="button purple"><span></span>Look I'm a button</a>
<a href="URL" class="button turquoise"><span></span>Look I'm a button</a>
<a href="URL" class="button red"><span></span>Look I'm a button</a>
</div>
<div class="copyright">
  Created by <a href="http://www.foulscode.blogspot.gr">FoulsCode</a>
</div>

LIVE DEMO


Αντικαταστήστε τα μαρκαρισμένα με τα δικά σας και κάντε αποθήκευση.

Διαβάστε Περισσότερα »
Related Posts Plugin for WordPress, Blogger...