Генератор кнопки 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 и добавить ее при наведении на кнопку, получится красивый эффект.

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

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

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

• Чтобы сделать кнопку по центру используем свойство margin: 0 auto. Подробно о позиционирование элементов написано тут.

• Можно сделать красивую кнопку с анимацией, читать тут.

• Как сделать каркас для кнопки в html можно прочитать тут.

Примеры красивых кнопок 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

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

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

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