Красивые кнопки на css

Красивые кнопки на css

Рубрика « Кнопки » | 31 комментариев

кнопка

Код для вставки в файл css:

a.button {
  position: relative;
  display: inline-block;
  width: 10em;
  height: 2.5em;
  line-height: 2.5em;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 1px #777;
  color: #fff;
  outline: none;
  border: 2px solid #F64C2B;
  border-radius: 5px;
  box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;
  background: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
}
a.button:active {
  top: .1em;
  left: .1em;
  box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset;

Код для вставки на страницу:

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

кнопка

Код для вставки в файл css:

a.button {
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: .5em 2em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #FDBE33 #000 #D77206;
  border-radius: 6px;
  background: linear-gradient(#F3AE0F, #E38916) #E38916;
  transition: 0.2s;
} 
a.button:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
a.button:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }

Код для вставки на страницу:

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

кнопка

Код для вставки в файл css:

a.button7 {
  font-weight: 700;
  color: white;
  text-decoration: none;
  padding: .8em 1em calc(.8em + 3px);
  border-radius: 3px;
  background: rgb(64,199,129);
  box-shadow: 0 -3px rgb(53,167,110) inset;
  transition: 0.2s;
} 
a.button7:hover { background: rgb(53, 167, 110); }
a.button7:active {
  background: rgb(33,147,90);
  box-shadow: 0 3px rgb(33,147,90) inset;
}

Код для вставки на страницу:

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

Код для вставки в файл 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;}
}

Код для вставки на страницу:

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

кнопка

Код для вставки в файл 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;
}

Код для вставки на страницу:

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

Кнопка

Код для вставки в файл css:

a.button2, a.button2:before {
  display: inline-block;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 100px;
  border: solid rgb(4,88,192);
  border-width: 3px 10px;
  outline: none;
  opacity: 1;
  transition: .6s, opacity 0s 9999999s, visibility 0s 9999999s;
} 
a.button2 {
  position: relative;
  padding: calc(8px + 3px - 1px) calc(15px + 10px - 1px);
  border: 1px solid rgba(62,153,239,.5);
  background: linear-gradient(to left, rgb(62,153,239) 1%, #fff 3%, rgb(44,135,232) 8%, rgba(255,255,255,.3) 50%, rgb(44,135,232) 92%, #fff 97%, rgb(62,153,239) 99%) no-repeat;
}
a.button2:before {
  content:  "Кнопка";
  position:  absolute; 
  bottom: -7px;
  left: -1px;
  width: calc(100% - (15px + 10px - 1px)*2);
  background: #fff linear-gradient(rgb(58,160,253), rgb(4,88,192) 60%, rgb(49,112,201));
  box-shadow: 0 10px 18px rgba(0,0,0,.5);
}
a.button2:hover {
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}
a.button2:hover:before {
  border-color: #0766d8;
  background: #fff linear-gradient(#3fadff, #0766d8 60%, #3279dd);
}
a.button2:focus,
a.button2:active {
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
  opacity: 0;
  visibility: hidden;
  transition: .4s;
}

Код для вставки на страницу:

<a href="#" class="button2" tabindex="0">кнопка</a>

Заказать

Код для вставки в файл css:

a.button22 {
  position: relative;
  display: inline-block;
  width: 6em;
  height: 2.5em;
  line-height: 2.4em;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  user-select: none;
  color: #000;
  outline: none;
  border: 1px solid rgba(110,121,128,.8);
  border-top-color: rgba(0,0,0,.3);
  border-radius: 5px;
  background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));
  box-shadow:
   0 -1px rgba(10,21,28,.9) inset,
   0 1px rgba(255,255,255,.5) inset;
}
a.button22:hover {
  background: linear-gradient(#d2dfea, #71828c);
}
a.button22:active {
  line-height: 2.6em;
  background: linear-gradient(#bac6cf, #c5d3de 20%, #71828c);
  box-shadow: 0 -1px rgba(255,255,255,.4) inset;
}
a.button22:before {
  content: "";
  position: absolute;
  top: -10px; right: -10px; bottom: -10px; left: -10px;
  z-index: -1;
  border-radius: 8px;
  background: linear-gradient(rgba(200,200,200,.5), rgba(240,240,240,.5));
}

Код для вставки на страницу:

<a href="#" class="button22">Заказать</a>

Скачать

Код для вставки в файл css:

a.button14 {
  display: inline-block;
  text-shadow: 1px 1px #fff;
  text-decoration: none;
  padding: .3em 1em;
  border: 1px solid #aaa;
  border-radius: 100px;
  outline: none;
  background: #d6dbbf no-repeat;
  background-image:
   linear-gradient(to left, #aaa, #aaa),
   linear-gradient(to left, #feffe8, #feffe8),
   linear-gradient(#feffe8, #d6dbbf);
  background-position: calc(100% - 2.7em) 0, calc(100% - 2.7em + 1px) 0, 0 0;
  background-size: 1px 100%, 1px 100%, auto auto;
  overflow: hidden;
}
a.button14:after {
  content: "\bb";
  position: relative;
  bottom: 0;
  display: inline-block;
  margin-left: 1.4em;
  vertical-align: middle;
  font-family: "Times","Times New Roman","serif","sans-serif","EmojiSymbols";
  font-weight: 700;
  font-size: 140%;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
a.button14:hover {
  background-color: #fdfd9f;
  background-image:
   linear-gradient(to left, #aaa, #aaa),
   linear-gradient(to left, #feffe8, #feffe8),
   linear-gradient(#fffce7, #fdfd9f);
}
a.button14:active:after {
  bottom: -1.2em;
  transition: .3s;
}

Код для вставки на страницу:

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

Набор кнопок

Демо

Код для вставки в файл css:

.light{
	background-color:#FFF;
	border:1px solid #dedede;
	padding:10px;
	margin-top:20px;}	
	
li{ 
        list-style:none;
	padding-top:10px;
	padding-bottom:10px;}	

.button, .button:visited{
	background: #222 url(overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
} 
.button:hover{background-color: #111; color: #fff;}
.button:active{top: 1px;}
.small.button, .small.button:visited{font-size: 11px}
.button, .button:visited, .medium.button, .medium.button:visited{
       font-size: 13px;
       font-weight: bold;
       line-height: 1;
       text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 												  }										  
.large.button, .large.button:visited{font-size: 14px; padding: 8px 14px 9px;}									  
.super.button, .super.button:visited{font-size: 34px; padding: 8px 14px 9px;}	
.pink.button, .magenta.button:visited{background-color: #e22092;}
.pink.button:hover{background-color: #c81e82;}
.green.button, .green.button:visited{ background-color: #91bd09; }
.green.button:hover{background-color: #749a02;}
.red.button, .red.button:visited{background-color: #e62727;}
.red.button:hover{background-color: #cf2525;}
.orange.button, .orange.button:visited{background-color: #ff5c00;}
.orange.button:hover{background-color: #d45500;}
.blue.button, .blue.button:visited{background-color: #2981e4;}
.blue.button:hover{background-color: #2575cf;}
.yellow.button, .yellow.button:visited{background-color: #ffb515;}
.yellow.button:hover{background-color: #fc9200;}
.purple.button, .purple.button:visited{background-color: #6C296F;}
.purple.button:hover{background-color: #B97EBC;}

Коды для вставки на страницу:

<a href="#" class="large button purple">Кнопка </>
<a href="#" class="large button green">Кнопка </>
<a href="#" class="large button red">Кнопка </>
<a href="#" class="super button pink">super</>
<a href="#" class="large button orange">Кнопка </>
<a href="#" class="large button blue">Кнопка </>
<a href="#" class="large button yellow">Кнопка </>

Вы можете заказать уникальную кнопку

Заказать кнопку

31 комментариев к статье “Красивые кнопки на css

  • Красивые кнопки — да, но благодарить хочу Вас за другое. Я этом деле я «0». Пытался раньше — бросил, ничего не получается. Сейчас начал пробовать снова. Так, вот, пытаясь разобраться, как с помощью вашего кода сделать кнопку, я понял, что кнопку нужно прописать в HTML коде, а ее красоту в CSS (простите, лох). Какая это радость, что все получилось. Спасибо Вам огромное, за этот урок! А, кнопки и правда, классные!

    Reply
    • Пожалуйста, Николай. Когда-то и я была новичком, по этому знаю, как важно уточнить, куда какие коды нужно ставитьhttp://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif .
      Сама часто пользуюсь своими записями на сайте, как шпаргалками)), рада, что и людям польза от них есть.
      Вот только я не смогла оценить ваши старания, Николай — сайт в комментарии не указан.

      Reply
  • Анжелика!
    я всегда завидовал тем, у кого и руки и голова на месте.
    мой случай — это только заказ.
    И как только у меня созреет вариант применения кнопок на блоге,
    я с радостью воспользуюсь Вашим великодушным предложением!

    Reply
    • Могу подкинуть пару вариантов))))): кнопка подписки на обновление сайта (вообще весь дизайн сменить), кнопки в сообщениях и меню сайта.
      Здесь кнопки, как пример, что менять их на сайте можно. Вдруг, на каком-то сайте понравилась кнопка или что-то ещё в дизайне, всё могу применить на вашем сайте.

      Reply
  • Все таки я когда-нибудь решусь изучать эту тему более подробно. Мне очень нравится ковыряться в кодах на блоге. Правда не хватает знаний, если вдруг захочется что-то изменить. Кнопочки просто классные у вас, если что теперь знаю где можно их взять)))

    Reply
    • Здравствуйте, Нонна!
      Я просто обожаю ковыряться в кодах! Этим и занимаюсь для разных блогов.
      Если хотите что-то изменить у себя, а знаний пока не хватает — можете обратиться ко мне, всё сделаю.
      Теперь свои работы на сайтах я публикую в своём потфолио, там и список моих умений на сегодняшний день.

      Reply
  • Такие красивые кнопочки!!! Тоже себе какую-нибудь «кнопочку-красотульку» (возможно и не одну) поставлю (лишь придумаю, где их применить). Как всегда, очень ценная, интересная и полезная информация от Вас, Анжелика. СПАСИБО! http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif

    Reply
    • Пожалуйста, Наталья!
      А кнопки можно менять любые в шаблоне, например, в комментариях, в меню, или заменить некоторые ссылки на кнопочки. Применение можно любое придумать, лишь бы было желание))).

      Reply
  • Здравствуйте, Анжелика! Как много всего интересного на вашем блоге, что глаза разбегаются, хочется всего и сразу. Видно, что вы профессионал своего дела. Хотелось бы взять себе такие кнопочки, но не знаю удастся ли их вставить в мою тему. Недавно нашла на одном сайте красивые кнопки прокрутки: — Вверх,вниз, прокрутка, стоп. Залила их на сервер, установила скрипт, они отобразились под сайтом, под подвалом. А с помощью стилей их нужно было установить с правой стороны сайта. Так вот, при добавлении стилей ничего не происходило, то есть они никак не хотели вставать на своё место, что я только не перепробовала, ничего не получалось. В моей теме вообще три файла стилей. Поэтому я теперь и боюсь что либо вносить в эти файлы. Не хочет моя тема читать внесённые изменения. Приятно было познакомиться с вами, буду вашим частым гостем. http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif

    Reply
    • Здравствуйте, Ирина!
      Эти кнопки нужно вставить в файл style.css, но бывают исключения, когда есть сжатый и скрытый файл в шаблоне со стилями, и изменяя только его возможно настроить внешний вид шаблона.
      Кстати, я делаю уникальные кнопки на заказ).

      Какая интересная у вас была кнопка! Вверх, вниз и даже стоп!
      На некоторых сайтах нет кнопки Наверх, не очень удобно без неё прокручивать вверх страницу вручную..
      А какие стили вы пробовали задать вашей кнопке и что конкретно пробовали? Её можно настроить.

      Reply
  • Анжелика!Какая красивущие кнопочки. Нравятся все , но больше всех черненькая сереньким верхом.Про кнопку для прокрутки статьи вверх знала, а вот что можно самой установить кнопочки, да еще и в форму подписки вставить со своим дизайном-этого никогда и не подозревала.Да, валенок я в таких делах.Теперь буду знать и обращаться к вам за помощью.А на помощь вы уже приходили ко мне по поводу настройки работы блога и все так красиво и оперативно исправили.Спасибо огромное(не могу не рассказать всем комментаторам, пусть люди знают отзывчивого и доброго человека в лицо).

    Reply
  • Суперовские кнопки, Анжелика!
    У вас появилась как раз таки новая под комментариями! Это для того, чтобы читатели могли выражать свои эмоции после прочтения статьи не только смайлами, но и загружая картинку?

    Я вот подумала, а было бы неплохо прикрутить себе под комментарии такую кнопочку, ведь я иногда в статьях спрашиваю о том, как получилось вручить тот или иной подарочек близким! А вдруг кто-нибудь бы и захотел загрузить свою фотку и поделиться своей идейкой…

    Reply
    • Анжелика,добрый вечер! А можно сделать так, чтобы кликнув по кнопке установленной на блоге, посетитель скачал какую-либо информацию? Просто иногда нужно, делаю словом прикрепляя нужный документ из медиафайлов, но это не всегда Читателю заметно, с кнопкой материал стал бы более выразительнымhttp://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif.

      И еще вот такая тема вдруг забеспокоила…как можно сделать так, чтоб в сайдбаре находилась картинка с надписью ПОДАРОК, кликнув по которой посетитель мог увидеть текст статьи с возможностью забрать предложенный презент? Может у вас есть такая информация, мне бы ссылочку на статью…

      Reply
      • Мария, для скачивания файла нужно загрузить этот файл в папку сайта и в ссылке кнопки вставить полный путь до него.
        А в сайдбаре возможно настроить модальное окно — при нажатии на картинку появится всплывающее окно, или спойлер — при нажатии информация развернётся. Пока таких статей у меня нет, но я всерьёз о них задумалась… Будут.

        Reply
  • Пара кнопочек ну прямо тааак понравились. Только пока не придумалось, куда их ставить и на какие материалы отсылать. Работаю сейчас над платным продуктом, вернусь потом и стырю какую-нибудь кнопочкуhttp://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif

    Reply
  • Здравствуйте!
    А я всё по старинке, вставил картинку кнопки и в свойствах переход на нужную страницу указываю. На мой взгляд проще.

    Reply
    • Здравствуйте, Сергей!

      А как же эффект при наведении курсора, и при нажатии на кнопку?
      Не говоря уже о том, что изображение имеет свой вес.
      Эти кнопочки не содержат картинок, только код. Они лёгкие и красивые, и ставить их не так сложно, как кажется на первый взгляд.

      Верхний (большой) код ставится только один раз в файл CSS шаблона, а нижний (одна строчка) в нужное место страницы. Очень просто!

      Вставлять картинку получается дольше..

      Reply
  • Анжелика, Вы — молодец!
    А теперь сбросьте мне Ваши рисунки (несколько) кнопочек и я сделаю страницу «Рекомендую» — там их и присобачим со ссылкой «ЗАКАЗАТЬ» на Ваше хозяйство…- эту страничку.
    И скоро я беру у Вас интервью — можете не скрываться — ничего не получится — я девушка настырная.http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif

    Reply
  • Здравствуйте!
    Опять новая красота!
    Очень интересные кнопки, главное совершенно разные по дизайну. Любой владелец сайта найдёт нужную именно для своего (самого красивого).
    Но все мы любим индивидуальность. Поэтому возможность заказать собственную кнопку не оставляет выбора обратиться именно за такой….

    Reply

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

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

Добавить изображение

http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif