Последние:

Vavik96

Интернет-дайджест для вебмастеров и фотографов.

Web 

Стили кнопок CSS

admin 0 Комментариев ,

Стили кнопок CSS созданы с помощью только CSS и HTML разметки. Подобные эффекты доступны благодаря новой версии CSS 3, которая расширила возможности веб-оформления. Самые различные виды дизайна и оформления понравятся многим. Подборку можно расценивать как для вдохновения, так и использовать по прямому назначению. Чтобы создать кнопку CSS достаточно базовых знаний.

N. 1
Кнопка N.1
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);
    }

 

N. 2
Кнопка N.2

HTML

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

CSS

    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;
    }

N. 3
Кнопка N.3
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;
    }

N. 4

Кнопка N.4
HTML

<a href="#" class="glo">Кнопка N.4</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;
    }

N. 5

Кнопка N.5
Vavik96.com

HTML

<a class="bot1" href="#">Кнопка N.1</a>
    <div class="knopka">
    Кнопка N.5
    <span class="leftk">Vavik96.com<span class="nub"></span>
    </span>
    </div>

 

CSS

    .knopka {
        background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0px 1px rgba(0, 0, 0, 0.5);
        color: #666;
        cursor: pointer;
        display: table;
        font: 500 17px verdana;
        margin: 10px auto;
        padding: 10px 10px;
        position: relative;
        text-decoration: none;
    	text-align:center;
        transition: all 0.4s ease-in 0s;
        z-index: 1;
    }
    .knopka:hover, .knopka:active {
    color: #222;
    }
    .knopka span {
         box-sizing: border-box;
        opacity: 0;
        padding: 10px;
        position: absolute;
        transition: all 0.4s ease-in 0.2s;
        width: 180px;
        z-index: 1;
    }
    .knopka span .nub {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
        border-color: transparent;
        border-radius: 0;
        border-style: solid;
        box-sizing: border-box;
        display: block;
        height: 10px;
        left: 42%;
        padding: 5px;
        position: absolute;
        transform: rotate(45deg);
        transition: all 0.4s ease-in 0.2s;
        width: 10px;
        z-index: 0;
    }
    .knopka span.leftk {
        left: 4px;
        top: 0;
    }
    .knopka span.leftk .nub {
        left: 172px;
        top: 20px;
    }
    .knopka:hover span {
         background: none repeat scroll 0 0 #cadee8;
        color: #444;
        font-size: 16px;
        height: auto;
        opacity: 100;
        transition: all 0.4s ease-in 0.2s;
    }
    .knopka:hover span .nub {
        transition: all 0.4s ease-in 0.2s;
    }
    .knopka:hover span.leftk {
        left: -193px;
    }

N. 6

Кнопка N.6
HTML

<a class="knopka2" href="javascript: void 0;">Купить</a>

 

CSS

    .knopka2 {
    	border: 3px solid #46DC64;
        color: #46DC64;
        display: block;
        font: 500 26px/61px arial;
        height: 64px;
        margin: 0 auto;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        width: 160px;
    	animation: credits 1s infinite;
      -webkit-animation: credits 1s infinite;
      animation-name: credits;
      -webkit-animation-name: credits;
         transition: all 0.3s linear 0s;
    }
    .knopka2:hover {
     border: 3px solid #FF3737;
     color: #FF3737;
     animation: 0s ease 0s normal none 1 running none;
    }
    @keyframes credits {
    	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    	40% {transform: translateY(-10px);}
    	60% {transform: translateY(-5px);}
    }
    @-webkit-keyframes credits {
    	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    	40% {-webkit-transform: translateY(-10px);}
    	60% {-webkit-transform: translateY(-5px);}
    }

N. 7
Посмотреть

HTML

<a class="knopka13">Посмотреть</a>

 

CSS

    .knopka13 {
    	margin:10px auto;
        border: 2px solid #333;
        color: #333;
        cursor: pointer;
        display: block;
        font-weight: bold;
        font: 16px/45px verdana;
        line-height: 3em;
        overflow: hidden;
        padding: 5px 10px;
        position: relative;
        width: 150px;
        text-align: center;
        transition: color 250ms ease 0s;
    }
    .knopka13:after {
        border: 0 solid #333;
        border-radius: 50%;
        bottom: -999px;
        content: "";
        height: 0;
        left: -999px;
        margin: auto;
        position: absolute;
        right: -999px;
        top: -999px;
        transition: border 250ms ease 0s;
        width: 0;
        z-index: -1;
    }
    .knopka13:hover {
        color: #fff;
    }
    .knopka13:hover:after {
        border-width: 200px;
        transition: border 500ms ease 0s;
    }

N. 8

HTML

<input class="button4" value="Купить" type="button">

CSS

input.button4 {
  position: relative;
  display: inline-block;
  font-family: Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  color: rgb(245,245,245);
  text-shadow: 0 -1px rgba(0,0,0,.1);
  text-decoration: none;
  user-select: none;
  padding: .3em 1em;
  outline: none;
  border: none;
  border-radius: 3px;
  background: #0c9c0d linear-gradient(#82d18d, #0c9c0d);
  box-shadow: inset #72de26 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px;
  -webkit-animation: pulsate 1.2s linear infinite;
  animation: pulsate 1.2s linear infinite;
}
input.button4:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  cursor: pointer;
}
input.button4:active {
  top: 1px;
  color: #fff;
  text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;
  box-shadow: 0 -1px 3px rgba(0,0,0,.3), 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
@-webkit-keyframes pulsate {
  50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;}
}
@keyframes pulsate {
  50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;}
}

 

N. 9

Глянцевая кнопка

HTML

<a href="#on" class="button1">Глянцевая кнопка</a>

CSS

a.button1 {
  position: relative;
  color: white;
  font-weight: bold;
  text-decoration: none;
  text-shadow: -1px -1px #000;
  user-select: none;
  padding: .8em 2em;
  outline: none;
  background-color: #000;
  background-image: linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%), radial-gradient(190% 100% at 50% 0%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.5) 50%, rgba(0,0,0,0) 50%);
  background-repeat: no-repeat;
  background-size: 200% 100%, auto;
  background-position: 200% 0, 0 0;
  box-shadow: rgba(0,0,0,.3) 0 2px 5px;
} 
a.button1:active {
  top: 1px;
  box-shadow: none;
}
a.button1:hover {
  transition: .5s linear;
  background-position: -200% 0, 0 0;
}

 

N. 10

кнопка

HTML

<a href="#" class="button19">кнопка</a>

CSS

 

a.button19 {
  position: relative;
  display: inline-block;
  color: #777674;
  font-weight: bold;
  text-decoration: none;
  text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
  user-select: none;
  padding: 1em 2em;
  outline: none;
  border-radius: 3px / 100%;
  background-image:
   linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
   linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
  background-repeat: no-repeat;
  background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
  background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
  box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
}
a.button19:hover {
  transition: .5s linear;
  background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}
a.button19:active {
  top: 1px;
}

 

Вам также может понравиться

CSS3 Меню с эффектом размытия

admin 0

Движение фона при скроллинге (parallax)

admin 0

Идеальные отзывчивые (responsive) изображения: HTML5 и Bootstrap 4

admin 0

Добавить комментарий

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.