Генератор кнопки css

Чтобы получить готовый css код кнопки нажми на нее и скопируй.

Все параметры кнопки

Размер кнопки
Размер шрифта
Закруглить края кнопки

Выбери шрифт у кнопки






Как сделать кнопку в генераторе css

Чтобы сделать красивую кнопку css воспользуемся генератором. У кнопки есть параметры.

  • Размер кнопки css. Изменяем форму кнопки высоту и ширину кнопки.
  • Размер текста у кнопки. Задается свойством font-size.
  • Закругление краев. Если нужна круглая кнопка используем свойство border-radius: 50%.

Зададим все цвета кнопки css.

  1. Верхний цвет градиента. Установим цвет в позиции top.
  2. Нижний цвет градиента. Задаем в позиции bottom.
  3. Полоса сверху кнопки. Дополнительная функция украшения.
  4. Цвет при наведении. Используем класс hover.
  5. Цвет текста. Подбираем цвет контрастный цвету кнопки.
  6. Цвет текста кнопки после наведения. Если изменим фон со светлого на темный, то и цвет должен стать другим.
  7. Цвет кнопки при нажатии. Установим третий цвет для класса active.
 

После установки всех параметров наживаем на скопировать код кнопки css и переносим в проект. В файле индекса зададим html код для кнопки с классом button. Теперь можно с генерировать тень box shadow и добавить ее при наведении на кнопку, получится красивый эффект.

Как сделать кнопку html

оформление кнопок css

Чтобы сделать красивую html кнопку воспользуемся псевдоклассами.

  1. &:active момент нажатия на кнопку добавляем свойство изменение цвета.
  2. &:hover навели курсор мышки на кнопку и она изменила цвет текста и фона.
 

Примеры красивых кнопок css

Рассмотрим стили css у 12 разных видов кнопок.

Прозрачная кнопка css

Прозрачная кнопка
button.button11
    color:#fff;
    line-height: 32px;
    border: 0px;
    text-align: center;
    width: 100px;
    border-radius:16px;
    background:transparent;
    background-image: -webkit-linear-gradient(#127009, #3b9932, #409e37);
    background-image: -moz-linear-gradient(#127009, #3b9932, #409e37);
    background-image: -o-linear-gradient(#127009, #3b9932, #409e37);
    -moz-box-shadow: inset 0 0 7px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.5);
    -o-box-shadow: inset 0 0 7px rgba(0,0,0,0.5);
    box-shadow: inset 0 0 7px rgba(0,0,0,0.5);
    display: block;
    text-decoration: none;
    font-size: 14px;
    padding: 0px;
}
button.button1:before {
    content: ".";
    color:transparent;
    line-height: 16px;
    width: 90px;
    margin-top: 0px;
    margin-bottom: -17px;
    margin-left: 5px;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1) );
    background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
    border-radius:16px; 
    display:block;
}
Вторая прозрачная кнопка
button.button2 {
    color:#fff;
    line-height: 48px;
    border: 0px;
    text-align: center;
    width: 48px;
    border-radius:24px;
    background:transparent;
    background-image:-moz-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%);
    background-image:-webkit-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%);
    background-image:-o-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%);
    display: block;
    padding: 0px;
    text-decoration: none;
}
button.button2:before {
    content: ".";
    color:transparent;
    line-height: 24px;
    width: 40px;
    margin-left: 4px;
    margin-bottom: -24px;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) );
    background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    border-radius:24px; 
    display:block;
}
}
Кнопка с деформацией
button.button3{
  border-radius: 10px;
  border: none;
  padding: 10px 10px 14px 10px;
  color: #111;
  border-radius: 10px;
  font-size: 1.2em;
  font-weight: 200;
  transition: all 0.2s;
  margin: 5px;
  border-bottom: 0px solid #eee;
  cursor:pointer;

}
button.button3:active{
  transform: scaleX(0.9) translateY(4px);
}
button.button3.green{
  background: #82CA9D;
}
button:not(:active){
  box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.18) inset;
}
Стиль кнопки с изменением положения
button.button4{
  text-decoration: none;
  outline: none;
  display: inline-block;
  width: 140px;
  height: 45px;
  line-height: 45px;
  border-radius: 45px;
  margin: 10px 20px;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 3px;
  font-weight: 600;
  color: #524f4e;
  background: white;
  box-shadow: 0 8px 15px rgba(0,0,0,.1);
  transition: .3s;
}
button.button4:hover {
  background: #2EE59D;
  box-shadow: 0 15px 20px rgba(46,229,157,.4);
  color: white;
  transform: translateY(-7px);
}
Стиль с бликом
button.button5{
  text-decoration: none;
  outline: none;
  display: inline-block;
  padding: 12px 40px;
  margin: 10px 20px;
  border-radius: 30px;
  background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%);
  background-position: 100% 0;
  background-size: 200% 200%;
  font-size: 24px;
  font-weight: 300;
  color: white;
  box-shadow: 0 16px 32px 0 rgba(0,40,120,.35);
  transition: .5s;
}
button.button5:hover {
  box-shadow: 0 0 0 0 rgba(0,40,120,0);
  background-position: 0 0;
}
Кнопка с цветовой полосой
button.button6{
  text-decoration: none;
  outline: none;
  display: inline-block;
  margin: 10px;
  color: white;
  box-shadow: 0 0 0 2px white;
  padding: 20px 0;
  width: 150px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  position: relative;
  overflow: hidden;
}
span {
  position: relative;
  z-index: 5;
}
button.button6:before, 
button.button6:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
button.button6:before{
  transform: translateX(-100%);
  background: white;
  transition: transform .3s cubic-bezier(.55,.055,.675,.19);
}
button.button6:after {
  background: #413ad5;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.16,.73,.58,.62) .3s;
}
button.button6:hover:before,
button.button6:hover:after {transform: translateX(0);}
Кнопка с объемным цветом
button.button7{
  text-decoration: none;
  outline: none;
  display: inline-block;
  padding: 15px 30px;
  margin: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 0 40px 40px #F137A6 inset, 0 0 0 0 #F137A6;
  font-weight: bold;
  letter-spacing: 2px;
  color: white;
  transition: .15s ease-in-out;
}
button.button7:hover {
  box-shadow: 0 0 10px 0 #F137A6 inset, 0 0 10px 4px #F137A6;
  color: #F137A6;
}
Кнопка с бликом
button.button8{
  text-decoration: none;
  outline: none;
  display: inline-block;
  padding: 10px 30px;
  margin: 10px 20px;
  position: relative;
  overflow: hidden;
  border: 2px solid #fe6637;
  border-radius: 8px;
  color: #fe6637;
  transition: .2s ease-in-out;
}
button.button8:before {
  content: "";
  background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.5));
  height: 50px;
  width: 50px;
  position: absolute;
  top: -8px;
  left: -75px;
  transform: skewX(-45deg);
}
button.button8:hover {
  background: #fe6637;
  color: #fff;
}
button.button8:hover:before {
  left: 150px;
  transition: .5s ease-in-out;
}

Стеклянная кнопка

Стиль стеклянной кнопки
button.button9{
  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;
}
button.button9:hover {
  transition: .5s linear;
  background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}
button.button9:active {
  top: 1px;
}

3d кнопка css

Стиль 3d кнопки
button.button10{
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  text-shadow: -2px 2px rgba(255,255,255,.3);
  line-height: 1.1;
  padding: .5em 3em .5em .6em;
  background: linear-gradient(#ecc92b, #fce25b);
  box-shadow:
   0 0 0 1px #fce25b inset,
   -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7),
   -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6),
   -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5),
   -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4),
   -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3),
   -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2),
   -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1),
   -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0),
   -7px 9px 1px rgba(0,0,0,.4),
   -5px 11px 1px rgba(0,0,0,.2),
   -1px 13px 4px rgba(0,0,0,.2),
   4px 16px 7px rgba(0,0,0,.3);
  transition: .4s;
}
button.button10:active {
  box-shadow: none;
  -webkit-transform: translate(-7px, 8px);
  transform: translate(-7px, 8px);
}
button.button10:after {
  content: "";
  position: absolute;
  top: calc(50% - .6em/2);
  right: .6em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: .37em solid;
  border-top: none;
  border-left: none;
  width: .6em;
  height: .6em;
  box-shadow: inset -2px 2px rgba(255,255,255,.3);
}
button.button10:active {
  top: 1px;
}

Выпадающая кнопка css

Код для выпадающей кнопки css
button.button11 {
        color: #FFFFFF;
        text-decoration: none; 
}
button.button11{
    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:200px;
    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;
}
.button11: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);
}
.button11:hover .a-btn-3-text{
    text-shadow:0px 1px 1px #5d81ab;
    color:#fff;
}
.button11:hover .a-btn-3-slide-text{
    width:57px;
}
.button11:hover .a-btn-3-icon-right span{
    opacity:1;
}
.button11: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;
}

Пульсирующая кнопка css

Стиль в css для пульсирующей кнопки
button.button12{
        position: relative;
        display:block;
        color: #ED5B00;
        text-decoration: none;
        margin: 20px auto;
        text-decoration:none;
        text-align:center;
        width:125px;
        font-family: verdana;
        font-size: 22px;
        letter-spacing: 2px;
        border-bottom: 2px solid transparent;
}
button.button12:hover,button.button12:focus{
        outline: none;
        border-bottom: 2px solid #eee;
}

button.button12:before, button.button12: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);
}

button.button12: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);
}

button.button12:hover:before, button.button12: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);
        }
}