Примеры. Стили кнопок CSS

Предлагаю вашему вниманию неплохую подборку стилей кнопок CSS. Самые различные виды дизайна, оформления весьма станут по вкусу многим. Подборку можно расценивать как для вдохновения или же использовать по прямому назначению. Чтобы создать кнопку CSS достаточно базовых знаний, а при использовании специальных сервисов, то и знаний много не нужно. Есть также и программы в которых можно создавать кнопки CSS «Программы для создания меню CSS». Хоть программы и предназначены для меню, но в них есть возможность создавать отдельные кнопки CSS.

Примеры.

№1 Download
HTML

<a class="buttons" href='#' >Download</a>

CSS

a.buttons {
  width: 150px;
  height: 30px;
  text-decoration: none;
  padding-top: 9px;
  color: #a675b3;
  text-align: center;
  line-height: 20px;
  display: block;
  margin: 20px auto;
  font: normal 17px arial;
}

a.buttons:not(.active) {
  box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;
  background-image: linear-gradient(#3b2751, #271739);
  text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #311d47;
}

a.buttons:not(.active):hover,
a.buttons:not(.active):focus {
  transition: color 200ms linear, text-shadow 500ms linear;
  color: #fff;
  text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #2a153c;
}
a.buttons:not(:hover) {
    transition: 0.6s;
}

№2 Green button
HTML

<a href="#" class="green">Green button</a>

CSS

a.green{
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
color: #fff;
display:block;
width:100px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 8px 16px;
margin: 20px auto;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear;
-o-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;        
}
a.green {
background-color: rgb( 43, 153, 91 );
border: 1px solid rgb( 33, 126, 74 );
}
        
a.green:hover {
background-color: rgb( 75, 183, 141 );
}

№3 Посмотреть Demo
HTML

<a class="bot1" href="#">Посмотреть Demo</a>

CSS

a.bot1{
    background:linear-gradient(to bottom, #FFFFFF, #E6E6E6) #F5F5F5 repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
        text-decoration:none;
    display:block;
    font-size: 14px;
        width:120px;
    line-height: 20px;
    margin: 20px auto;
    padding: 4px 12px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

a.bot1:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
}

a.bot1:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}
a.bot1:hover:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

№4 Посмотреть Demo
HTML

<a class="bot8"  href="#">Посмотреть Demo</a>
a.bot8 {
  background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
        border-radius: 4px;
    color: #555555;
    display:block;
        width:120px;
        margin: 20px auto;
    font-size: 14px;
        text-align:center;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
        text-decoration:none;
}
a.bot8:hover, a.bot8:focus {
   border-color: rgba(82, 168, 236, 0.8);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
   outline: 0 none;
}

№5 Buttons
HTML

<a href="#" class="butt">Buttons</a>

CSS

a.butt {
        text-align:center;
        font-size:13px;
        text-decoration: none;
        font-weight: 700;
        padding: 3px 6px;
        background: #eaeef1;
        display:block;
        width:60px;
        margin: 20px auto;
        background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.1));
        border-radius: 3px;
        color: rgba(0,0,0,.6);
        text-shadow: 0 1px 1px rgba(255,255,255,.7);
        box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.7);
}

a.butt:hover, a.butt.hover {
        background: #fff;
}
a.butt:active, a.butt.active {
        background: #d0d3d6;
        background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,0));
        box-shadow: inset 0 0 2px rgba(0,0,0,.2), inset 0 2px 5px rgba(0,0,0,.2), 0 1px rgba(255,255,255,.2);
}

№6 Story Hack
HTML

<a href="#" class="button"><span>✓</span>Story Hack</a>

CSS

a.button {
  display:block;
  text-align: center;
  height: 50px;
  width:160px;
  margin: 20px auto;
  line-height: 50px;
  padding-left: 38px;
  position: relative;
  background:rgb(41,127,184);
  color:rgb(255,255,255);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  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);
}

a.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);
}
a.button:hover span, .button.active span {
  background:#fff;
  border-right: 1px solid  rgba(0,0,0,0.3);
  color: #297FB8;
}

№7 Button 3D
HTML

<a href="#" class="bot9">Button 3D</a>

CSS

a.bot9{
        display:block;
        width:60px;
    margin: 20px auto;
        background-color:#3bb3e0;
        font-family: 'Open Sans', sans-serif;
        font-size:12px;
    font-weight:bold;
        text-decoration:none;
        color:#053154;
    text-shadow:rgba(255,255,255,0.6) 1px 1px 0;
        position:relative;
        padding:10px 20px;
        padding-right:50px;
        background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(44,160,202)),
        color-stop(1, rgb(62,184,229))
        );
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 3px 0px 0px #156785, 0px 10px 5px #999;
        -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 3px 0px 0px #156785, 0px 10px 5px #999;
        -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 3px 0px 0px #156785, 0px 10px 5px #999;
        box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 10px 5px #999;
}

a.bot9:active {
        top:3px;
        background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
        background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
        background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
        background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
        background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(62,184,229)),
        color-stop(1, rgb(44,160,202))
        );
        -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 3px 3px #999;
        -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 3px 3px #999;
        -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 3px 3px #999;
        box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 3px 3px #999;
}

a.bot9::before {
        background-color:#057194;
   background-repeat:no-repeat;
  background-position:center center;
  content:"&#x2764;";
  color:#fff;
  text-shadow:none;
  font-weight:normal;
  vertical-align:middle;
  padding: 2px 0 0 4px;
  width:20px;
        height:20px;
        position:absolute;
        right:15px;
        top:50%;
        margin-top:-9px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
        -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
        -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
        box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
a.bot9:active::before {
        top:50%;
        margin-top:-12px;
        -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
        -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
        -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
        box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}

№8 Buttons
HTML

<a href="#" class="bot5">Buttons</a>

CSS

a.bot5 {
  display: block;
  width:80px;
  margin: 20px auto;
  vertical-align: top;
  padding: 7px 20px;
  font-family: inherit;
  font-size: 15px;
  color: #111;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 2px rgba(255, 255, 255, 1);
  background-color: #ccc;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #202020 #1a1a1a #111;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #efefef, #777);
  background-image: -moz-linear-gradient(top, #efefef, #777);
  background-image: -o-linear-gradient(top, #efefef, #777);
  background-image: linear-gradient(to bottom, #efefef, #777);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0px 1px 1px rgba(0, 0, 0, 0.2);
}
a.bot5:hover {
  background-color: #aaaaaa;
  background-image: -webkit-linear-gradient(top, #ccc, #555);
  background-image: -moz-linear-gradient(top, #ccc, #555);
  background-image: -o-linear-gradient(top, #ccc, #555);
  background-image: linear-gradient(to bottom, #ccc, #555);
}
a.bot5:active, .bot5.active {
  background-color: #b42f32;
  border-color: #1c1c1c #202020 #222;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.09);
}

№9 Download
HTML

<a href="#" class="bott">Download</a>

CSS

a.bott{
display: block;
font-size: 1.1em;
width:90px;
text-decoration:none;
text-align:center;
font: bold 14px arial;
text-transform: uppercase;
padding: 10px 15px;
margin: 20px auto;
color: #ccc;
background-color: #555;
background-image: linear-gradient(top, #888 0%, #555 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(1, #555));
background-image: -moz-linear-gradient(top, #888 0%, #555 100%);
background-image: -o-linear-gradient(top, #888 0%, #555 100%);
border: none;
border-radius: 3px;
text-shadow: 0px -1px 0px #000;
box-shadow: 0px 1px 0px #666,0px 5px 0px #444,0px 6px 6px rgba(0, 0, 0, .6);
-webkit-transition: ease .15s all;
-moz-transition: ease .15s all;
-o-transition: ease .15s all;
transition: ease .15s all;
-webkit-animation: none;
 -moz-animation: none;
 -o-animation: none;
  animation: none;
}
a.bott:hover, a.bott:focus{
-webkit-animation: linear 1.2s light infinite;
-moz-animation: linear 1.2s light infinite;
-o-animation: linear 1.2s light infinite;
animation: linear 1.2s light infinite;
}
@-webkit-keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@-moz-keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@-o-keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
a.bott:active{
color: #fff;
text-shadow: 0px -1px 0px #444,0px 0px 5px #ffd,0px 0px 8px #fff;
box-shadow: 0px 1px 0px #666,0px 2px 0px #444,0px 2px 2px rgba(0, 0, 0, .9);
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-o-transform: translateY(3px);
transform: translateY(3px);
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}

№10 Блик
HTML

<a href="#" class="boot">Блик</a>

CSS

a.boot {
  -webkit-transform: translate3D(0, 0, 0);
  -webkit-backface-visibility: hidden;
  color: #2d2d2d;
  padding: 14px 24px 12px;
  font-family: "Helvetica";
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 20px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display:block;
  width:90px;
  margin:20px auto;
  text-align:center;
}
a.boot:after {
  padding: 0;
  border: 2px solid #000000;
  content: '';
  width: 95%;
  height: 46px;
  display: block;
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
}
a.boot:before {
  -webkit-transition: all 0s ease-in-out;
  -moz-transition: all 0s ease-in-out;
  -o-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out;
  content: '';
  width: 100%;
  height: 60px;
  display: block;
  position: absolute;
  z-index: -1;
  border-left: 15px solid white;
  box-shadow: -20px 30px 30px white;
  background: transparent;
  top: 0px;
  left: -15px;
  margin-left: -1px;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
 a.boot:hover:before, a.boot:active:before, a.boot:focus:before {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: translate(115%, 0);
  -moz-transform: translate(115%, 0);
  -ms-transform: translate(115%, 0);
  -o-transform: translate(115%, 0);
  transform: translate(115%, 0);
}

№11 Download
HTML

<a href="#" class="buttonns">Download</a>

CSS

a.buttonns {
  padding: 3px 14px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.701961) 0px 5px 12px;
   -webkit-transform-origin: 50% 1px;
   -webkit-transition: all 0.15s ease-in-out;
  background:  #161616;
  border-color: rgba(255, 255, 255, 0.027451) #FF8C39 rgba(255, 255, 255, 0.027451) rgba(255, 255, 255, 0.027451);
   border-style: solid;
  border-width: 1px 4px 1px 1px;
  box-shadow: rgba(0, 0, 0, 0.701961) 0px 5px 12px;
  color: #555;
  display:block;
  width:90px;
  font-family: Open Sans, Sans-serif;
  border-radius: 5px;
   font-size: 13px;
  letter-spacing: 4px;
  text-shadow: rgb(0, 0, 0) 0px 1px 1px;
  line-height: 30px;
  position: relative;
 margin: 20px auto;
  text-align: center;
  text-decoration:none;
}
a.buttonns:hover {
  cursor: pointer;
  opacity: 0.9;
  border-width: 1px 7px 1px 1px;
}
a.buttonns:active {
-webkit-box-shadow:inset rgba(0, 0, 0, 0.701961) 0px 7px 12px,rgba(0, 0, 0, 0.701961) 0px 2px 12px  ;
text-shadow: rgb(0, 0, 0) 0px -2px 1px;
margin-top: 1px;
}

№12 Download
HTML

<a href="#" class="botr">Download</a>

CSS

a.botr{
  background:#fff;
  width:225px;
  display:block;
  height:33px;
  padding-top:19px;
  border:1px solid #000;
   margin: 20px auto;
  font-family: 'Dosis', sans;
  font-size: 18px;
  font-weight:200;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  opacity:.8;
  letter-spacing: 1px;
    -webkit-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
   -moz-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
     -o-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
        transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
}
a.botr:hover{
  width:225px;
  height:33px;
  padding-top:19px;
  border:1px solid teal;
  margin: 20px auto;
  opacity:1;
  letter-spacing: 4px;
  -webkit-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
   -moz-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
     -o-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
        transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
}

№13 Home
HTML

<a href="#" class="blubtn">Home</a>

CSS

a.blubtn {
  width:90px;
  text-align:center;
  display:block;
  font-family: arial;
  text-decoration: none;
  font-weight: 300;
  font-size: 14px;
  border: #1071FF 1px solid;
  color: #1071FF;
  padding: 3px;
  padding-left: 5px;
  padding-right: 5px;
   margin: 20px auto;
  transition: .5s;
  border-radius: 0px;
}
a.blubtn:hover {
  top: 5px;
  transition: .5s;
  color: #10FF58;
  border: #10FF58 1px solid;
  border-radius: 10px;
}
a.blubtn:active {
  color: #000;
  border: #1A1A1A 1px solid;
  transition: .07s;
  background-color: #FFF;
}

№14 Download
HTML

<a href="#" class="boton1">Download</a>

CSS

a.boton1{
  background:#eee;
  color:#088;
  text-decoration:none;
  display:block;
  width:90px;
  text-align:center;
  margin:20px auto;
  padding:10px 10px;
  transition:all 0.3s;
  }
 a.boton1:hover{
  box-shadow:0px -5px 0 #088 inset;
}

№15 Small Button
HTML

<a href="#" class="bbotre">Small Button</a>

CSS

a.bbotre {
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    display:block;
        width:90px;
    font-weight: bold;
    margin:20px auto;
        text-align:center;
    padding: 1px 5px;
    color: #717171;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 6px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#d4d4d4));
    background: -webkit-linear-gradient(#f6f6f6, #d4d4d4);
    background-image: -moz-linear-gradient(top, #f6f6f6, #d4d4d4);
    background-image: -moz-gradient(top, #f6f6f6, #d4d4d4);
    border: 1px solid #a1a1a1;
}

a.bbotre:hover {
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#ececec));
    background: -webkit-linear-gradient(#f6f6f6, #ececec);
    background-image: -moz-linear-gradient(top, #f6f6f6, #ececec);
    background-image: -moz-gradient(top, #f6f6f6, #ececec);
}

№16 Demo
HTML

<a href="" class="fciA navItem"><span class="fciSpan">Demo</span></a>

CSS

a.fciA {
  margin: 40px auto;
  font-family:arial;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: -1px;
  text-decoration: none;
  text-align:center;
  display:block;
  width:150px;
  color: #888888;
  position: relative;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}
a.fciA:hover {
  color: #444444;
  background:rgba(0,0,0,0.1);
}
a.fciA:after {
  left: -20px;
  -webkit-transition-property: left, opacity, top;
  -moz-transition-property: left, opacity, top;
  -o-transition-property: left, opacity, top;
  transition-property: left, opacity, top;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-left: 5px solid #444444;
  border-top: 5px solid #444444;
  top: -22px;
  opacity: 0;
}
a.fciA:hover:after {
  left: -10px;
  top: -12px;
  opacity: 1;
}
a.fciA:before {
  right: -20px;
  -webkit-transition-property: right, opacity, top;
  -moz-transition-property: right, opacity, top;
  -o-transition-property: right, opacity, top;
  transition-property: right, opacity, top;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-right: 5px solid #444444;
  border-top: 5px solid #444444;
  top: -22px;
  opacity: 0;
}
a.fciA:hover:before {
  right: -10px;
  top: -12px;
  opacity: 1;
}
.fciSpan:after {
  left: -20px;
  -webkit-transition-property: left, opacity, bottom;
  -moz-transition-property: left, opacity, bottom;
  -o-transition-property: left, opacity, bottom;
  transition-property: left, opacity, bottom;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-left: 5px solid #444444;
  border-bottom: 5px solid #444444;
  bottom: -24px;
  opacity: 0;
}
.fciSpan:hover:after {
  left: -10px;
  bottom: -14px;
  opacity: 1;
}
.fciSpan:before {
  right: -20px;
  -webkit-transition-property: right, opacity, bottom;
  -moz-transition-property: right, opacity, bottom;
  -o-transition-property: right, opacity, bottom;
  transition-property: right, opacity, bottom;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-right: 5px solid #444444;
  border-bottom: 5px solid #444444;
  bottom: -24px;
  opacity: 0;
}
.fciSpan:hover:before {
  right: -10px;
  bottom: -14px;
  opacity: 1;
}

№17
Стоимость
100$


HTML

<a href="#" class="a-btn-3">
<span class="a-btn-3-text">Стоимость</span>
<span class="a-btn-3-slide-text">100$</span>
<span class="a-btn-3-icon-right"><span></span></span>
</a>

CSS

a.a-btn-3 {
        color: #FFFFFF;
        text-decoration: none;
        font-family: 'Oswald',Arial,sans-serif;        
}
a.a-btn-3{
    background:#80a9da;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
    background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
    padding-left:20px;
    padding-right:80px;
    height:38px;
    display:block;
        margin: 20px auto;
        text-align:center;
        width:70px;
    position:relative;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    overflow:hidden;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn-3-text{
    padding-top:5px;
    display:block;
        width:0px;
    font-size:18px;
    white-space:nowrap;
    text-shadow:0px 1px 1px rgba(255,255,255,0.3);
    color:#446388;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.a-btn-3-slide-text{
    position:absolute;
    height:100%;
    top:0px;
    right:52px;
    width:0px;
    background:#63707e;
    text-shadow:0px -1px 1px #363f49;
    color:#fff;
    font-size:18px;
    white-space:nowrap;
    text-transform:uppercase;
    text-align:left;
    text-indent:10px;
    overflow:hidden;
    line-height:38px;
    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -webkit-transition:width 0.3s linear;
    -moz-transition:width 0.3s linear;
    -o-transition:width 0.3s linear;
    transition:width 0.3s linear;
}
.a-btn-3-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:52px;
    border-left:1px solid #5d81ab;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-3-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    background:transparent url(images/arrow_right.png) no-repeat 50% 55%;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn-3:hover{
    padding-right:140px;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn-3:hover .a-btn-3-text{
    text-shadow:0px 1px 1px #5d81ab;
    color:#fff;
}
.a-btn-3:hover .a-btn-3-slide-text{
    width:57px;
}
.a-btn-3:hover .a-btn-3-icon-right span{
    opacity:1;
}
.a-btn-3:active{
    position:relative;
    top:1px;
    background:#5d81ab;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#80a9da;
}

Картинка стрелки. Скачать

№18 Скачать
HTML

<a href="#" class="bttr tick">Скачать</a>

CSS

a.bttr{
text-decoration:none;
text-align:center;
color:#83D244;
font: bold 18px arial;
padding: 9px 0 0 15px;
}

.bttr{
margin: 20px auto;
display: block;
background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
background-image: linear-gradient(top, #f4f1ee, #fff);
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
height: 35px;
position: relative;
width: 122px;                        
-webkit-transition: all .1s linear;
transition: all .1s linear;
}

.bttr:after{
color:#e9e6e4;
content: "";
display: block;
font-size: 30px;
height: 30px;
text-decoration: none;
text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
position: absolute;
width: 30px;
}

.tick:after{
content: "&#x2714;";
left:8px;
top:-3px;
}

.bttr:hover{
background-image: -webkit-linear-gradient(top, #fff, #f4f1ee);
background-image: linear-gradient(top, #fff, #f4f1ee);
color:#0088cc;
}

.tick:hover:after{
color:#83d244;
text-shadow:0px 0px 6px #83d244;
}

.bttr:active{
background-image: -webkit-linear-gradient(top, #efedec, #f7f4f4);
background-image: linear-gradient(top, #efedec, #f7f4f4);
box-shadow: 0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5);
}
.bttr:active:after{
color:#dbd2d2;
text-shadow: 0px -1px 1px #bdb5b4, 0px 1px 1px white;
}

№19

HTML

<div class="ccd"><a href="#" class="ddott">Download</a></div>

CSS

.ccd {
    height: 95px;
    overflow: hidden;
    width: 60%;
    margin:0 auto;
    position: relative;
}

a.ddott {
    margin:0 auto;
    display: block;
    line-height: 50px;
    height: 50px;
    width: 24%;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 100px 0 #FFF,1px 76px 10px #000;
    color: #FFF;
    background: #5D8EC7;
    border-right: 2px solid #FFF;
    border-left: 2px solid #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}
a.ddott:hover {
    text-shadow: 0 50px 0 #FFF, 1px 51px 20px #FFF;
    margin-top: -50px;
    height: 100px;
    background: #222;
}

№20 Download
HTML

<a href="#" class="glo">Download</a>

CSS

a.glo{
 color:#00c6ff;
 padding: 10px 20px;
 width:100px;
 text-decoration:none;
 text-align:center;
 margin:20px auto;
 display: block;
 background-image: linear-gradient(to left,transparent,transparent 50%,#00c6ff 50%,#00c6ff);
 background-position: 100% 0;
 background-size: 200% 100%;
 transition: all .25s ease-in;
 font: 400 18px tahoma;
 border: 1px solid #00C6FF;
}
a.glo:hover {
background-position: 0 0;
color:#fff;
}

№21 Button!
HTML

<a href="#" class="butggton">Button!</a>

CSS

.butggton {
  text-decoration: none;
  color: #7f8c8d;
  background: #fefefe;
  padding:5px 8px;
  border: 1px solid #bdc3c7;
  border-radius: 3px;
  margin: 20px auto;
  text-align:center;
  display:block;
  width:120px;
  position: relative;
  height:25px;
  font: 400 16px verdana;
 }

a.butggton:after {
    content: "";
    background: linear-gradient(to right, #2ecc71 10%, #3498db 10%, #3498db 20%, #8e44ad 20%, #8e44ad 30%, #e67e22 30%, #e67e22 40%, #c0392b 40%, #c0392b 50%, #2ecc71 50%, #2ecc71 60%, #3498db 60%, #3498db 70%, #8e44ad 70%, #8e44ad 80%, #e67e22 80%, #e67e22 90%, #c0392b 90%);
    background-size: 200% 100%;
    display: inline-block;
    width: 100%;
    height: 4px;
    position: absolute;
    left: 0;
    bottom: 0;
  }
a.butggton:hover {
    color: #34495e;
}

№22 Download
HTML

<a href="#" class="obl">Download</a>

CSS

a.obl{
        position: relative;
        display:block;
        color: #ED5B00;
        text-decoration: none;
        margin: 20px auto;
        text-align:center;
        width:125px;
        font-family: verdana;
        font-size: 22px;
        letter-spacing: 2px;
        border-bottom: 2px solid transparent;
}

a.obl:hover,a.obl:focus{
        outline: none;
        border-bottom: 2px solid #eee;
}

a.obl::before, a.obl:after{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70px;
        height: 70px;
        border: 12px double rgba(0,0,0,0.1);
        border-radius: 50%;
        content: '';
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
        -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
        transform: translateX(-50%) translateY(-50%) scale(0.2);
}

a.obl:after{
        width: 60px;
        height: 60px;
        border-width: 6px;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
        -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
        transform: translateX(-50%) translateY(-50%) scale(0.8);
}

a.obl:hover:before, a.obl:hover:after{
        -webkit-animation: pulsate 1.2s infinite;
        -moz-animation: pulsate 1.2s infinite;
        -ms-animation: pulsate 1.2s infinite;
        animation: pulsate 1.2s infinite;
}

@-webkit-keyframes pulsate{

  30%{
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  }

        100%{
        opacity: 0.3;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
        }

}

@-moz-keyframes pulsate{

  30%{
        opacity: 1;
        -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  }

        100%{
        opacity: 0.3;
        -moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
        }

}

@-ms-keyframes pulsate{

  30%{
        opacity: 1;
        -ms-transform: translateX(-50%) translateY(-50%) scale(1);
  }

        100%{
        opacity: 0.3;
        -ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
        }

}

@-keyframes pulsate{

  30%{
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1);
  }

        100%{
        opacity: 0.3;
        transform: translateX(-50%) translateY(-50%) scale(0.5);
        }
}

№23 Посмотреть Demo
HTML

<a class="bot3"  href="#">Посмотреть Demo</a>

CSS

.bot3 {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
    background-size: 40px 40px;
        border-radius: 4px;
        background-color: #4a6d76;
    display: block;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    height: 35px;
    text-align: center;
    transition: width 0.6s ease 0s;
    width: 160px;
        font:bold 16px arial;
        line-height: 35px;
        margin:20px auto;
        text-decoration:none;
        animation: 2s linear 0s normal none infinite progress-bar-stripes;
}

.bot3:hover,.bot3:focus{
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
@-moz-keyframes progress-bar-stripes {
0% {
    background-position: 40px 0;
}
100% {
    background-position: 0 0;
}
}
@-moz-keyframes progress-bar-stripes {
0% {
    background-position: 40px 0;
}
100% {
    background-position: 0 0;
}
}

№24 Посмотреть Demo
HTML

<a class="bot2"  href="#">Посмотреть Demo</a>

CSS

.bot2 {
        margin:20px auto;
    color: #FFFFFF;
    display: block;
    font:bold 16px arial;
    height: 35px;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    width: 160px;
        background: linear-gradient(to bottom, #209DCA, #0F84AF) repeat scroll 0 0 / 100% 200% rgba(0, 0, 0, 0);
    transition: all 0.5s linear 0s;
        border-bottom: 4px solid #ccc;
}
.bot2:hover,.bot2:focus{
    background-position: 0 -102%;
}

Стили кнопок при необходимости можно отредактировать полностью под свой дизайн.

Источник: Codepen.io

21 комментарий
Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *