Красивые кнопки CSS с оригинальными эффектами

В этой статье, Вашему вниманию представлены 13 кнопок с различными Эффектами при наведении и нажатии.

Различные формы и цвета для кнопки на Ваш вкус сделать не сложно, и об этом подробно в статье Блок с закруглёнными углами и тенью. Эллипс

Нужно просто поиграть с цифрами в свойствах border-radius и box-shadow, поэкспериментировать со свойствами gradient и background

Все кнопки, показанные ниже, действующие. Выбирайте вариант, который вам понравится.

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

Чтоб быстро увидеть код, понравившейся кнопки, щёлкните по ссылке «Код», рядом с кнопкой.

При наведении:

Градиент Код

Наплывание Код

Обесцвечивание Код

Всплывание Код

Искажение Код

Многоцветная рамка Код

3D кнопка Код

Появление текста вращением Код

Появление текста Код

Появление картинки Код

При нажатии:

 

Красная кнопка Код

 

 

Кнопка с индикатором Код

 

 

Клавиша Код

Важно! Для тех кто всё ещё пользуется визуальным редактором.

При переключении режимов редактора событие onclick слетает и его нужно прописывать по новой, или вместо конструкции <buttom onclick…. использовать <a href=….

Градиент

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.one {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
}
.one:hover {
	background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#777);	
}
</style>
</head>
<body>
<button class="one" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Наплывание

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.two {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.two:before {
	content:'';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	background: rgba(148,144,143,0.4);
	border-radius: 5px;
	transition: all 0.5s ease-out;
}
.two:hover:before {
	height: 42px;
}
</style>
</head>
<body>
<button class="two" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Обесцвечивание

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.three {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.three:hover {
	background: rgba(0,0,0,0);
	color: #3a7999;
	box-shadow: inset 0 0 0 3px #3a7999;
}
</style>
</head>
<body>
<button class="three" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Всплывание

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.elementy {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
  -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.elementy:after {
  content: "";
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  opacity: 0;
  -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1));
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.elementy:hover {
  -webkit-transform: translate(10px);
  transform: translate(10px);
}

.elementy:hover:after {
    opacity: 1;
}
</style>
</head>
<body>
<button class="elementy" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Искажение

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.five {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.five:hover {
	transform: skew(10deg);
}
</style>
</head>
<body>
<button class="five" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Разноцветная рамка

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.six {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.six:hover {
	box-shadow: 0px 0px 0px 2px #f90914,
		0px 0px 0px 7px #a7f9c9,
		0px 0px 0px 9px #f90914,
		0px 0px 5px 10px #ff4d00;
	}
</style>
</head>
<body>
<button class="six" onclick="location.href='#';">Кнопка</button>
</body>
</html>

3D кнопка

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.seven {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.seven {
	transform-style: preserve-3d;
}
.seven:after {
	top: -50%;
	left: 0px;
	width: 100%;
	position: absolute;
	background: #fdeaa8;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	content: 'Кнопка';
	transform-origin: left bottom;
	transform: rotateX(90deg);
}
.seven:hover {
	transform-origin: center bottom;
	transform: rotateX(-90deg) translateY(100%);
}
</style>
</head>
<body>
<button class="seven" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Появление вращающегося текста

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.eight {
	color: #000;
	background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
	width: 80px;
	height: 25px;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 2px 4px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.eight:before {
    display: block;
    content: "";
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.eight:after {
   font-family: 'Lucida Console';
   content: attr(title);
   display: block;
   font-size: 18px;
   text-align: center;
   opacity: 0;
   position: absolute;
   text-transform: none;
   top: 50%;
   -webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
   -webkit-transform: scale(0) translateY(-50%);
	transform: scale(0) translateY(-50%);
   -webkit-transition: all 550ms ease-in-out;
	transition: all 550ms ease-in-out;
   width: 80%;
   z-index: 3;
}
.eight:hover:before {
   opacity: 0.6;
}
.eight:hover:after {
   opacity: 1;
   -webkit-transform: scale(1) translateY(-50%);
	transform: scale(1) translateY(-50%);
}
.eight:after {
   -webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
	transform: scale(0) rotate(-360deg) translateY(-50%);
}
.eight:hover:after {
   -webkit-transform: scale(1) rotate(0deg) translateY(-50%);
	transform: scale(1) rotate(0deg) translateY(-50%);
}
</style>
</head>
<body>
<a class="eight" title="knopka" href="#"></a>
</body>
</html>

Появление текста

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.nine {
	color: #000;
	background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
	width: 80px;
	height: 25px;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 2px 4px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.nine:before {
    display: block;
    content: "";
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.nine:after {
   font-family: 'Lucida Console';
   content: attr(title);
   display: block;
   font-size: 18px;
   text-align: center;
   opacity: 0;
   position: absolute;
   text-transform: none;
   top: 50%;
   -webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
   -webkit-transform: scale(0) translateY(-50%);
	transform: scale(0) translateY(-50%);
   -webkit-transition: all 550ms ease-in-out;
	transition: all 550ms ease-in-out;
   width: 80%;
   z-index: 3;
}
.nine:hover:before {
   opacity: 0.6;
}
.nine:hover:after {
   opacity: 1;
   -webkit-transform: scale(1) translateY(-50%);
	transform: scale(1) translateY(-50%);
}
</style>
</head>
<body>
<a class="nine" title="knopka" href="#"></a>
</body>
</html>

Появление картинки

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.ten {
	color: #524E49;
	background: #F7E09C;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.ten {
	padding: 10px 35px; 
	overflow: hidden;
}
.ten img {
	position: absolute;
	top: 7px;
	left: -30px;
	transition: all 200ms ease;
}
.ten:hover img {
	left: 5px;
}
</style>
</head>
<body>
<button class="ten" onclick="location.href='#';"><img src="images/Animation.gif">Кнопка</button>
</body>
</html>

Красная кнопка

CSS

.tower {
	position: relative;
}
.round {
	position: absolute;
	width: 70px;
	height: 70px;
	border: 4px solid hsl(5, 40%, 70%);
	border-radius: 50%/50%;
	background: linear-gradient(top,  hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%);
	сursor: pointer;
	transform: rotate(30deg);
	
}
.round:active {
	width: 69px;
	height: 69px;
	box-shadow: 0 0 hsl(5, 60%, 60%);
	border: 3px solid hsl(5, 40%, 70%);
	background: linear-gradient(top,  hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%);
}

HTML

<div class="tower">
<a class="round" href=""></a>	
</div>

Кнопка с индикатором

CSS

.switch {
    width: 70px;
    height: 70px;
    position: relative;
	cursor: pointer;
}
.dot {
	position: absolute;
	top: 7%;
	left: 7%;
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%/50%;
    background: hsl(0, 0%, 90%);
    box-shadow: 
        0 3px 5px hsl(0, 0%, 75%),
        inset 0 1px 0 hsl(0, 0%, 95%),
        inset 0 -5px 5px hsl(0, 0%, 75%),
        inset 0 5px 5px hsl(0, 0%, 95%);
	z-index: 1;
}
.circ {
	display: block;
    position: absolute;
	width: 82px;
    height: 82px;
    top: 0; 
    left: 0;
    border-radius: 50%;
    background: linear-gradient(#ccc, #fff);
    box-shadow: 
        inset 0 2px 1px hsl(0, 0%, 75%),
		inset 0 -2px hsl(0, 0%, 75%);
        	 
}
.switch .dot:before {
    content: "";
    position: absolute;
    width: 20%;
    height: 20%; 
    left: 40%;
    top: 40%;
    border-radius: inherit;
    background: radial-gradient(#fff, #333);
 
}
.switch:active .dot:before {
    content: "";
	background: radial-gradient(#fff, #02A829);
}
.switch:active .dot {
	background: radial-gradient(#fff, #ccc);
	width: 69px;
	height: 69px;
}

HTML

<div class="switch">
	<div class="circ">
	<a class="dot"></a>
	</div>
</div> 

Клавиша

CSS

.switch1 {
    width: 75px;
    height: 45px;
    position: relative;
	cursor: pointer;
}
.dot1 {
	position: absolute;
	top: 7%;
	left: 7%;
    display: block;
    width: 75px;
    height: 45px;
    border-radius: 7px;
    background: linear-gradient(hsl(0, 0%, 90%), hsl(0, 0%, 96%));
    box-shadow: -3px 5px hsl(0, 0%, 75%),
				1px -2px hsl(0, 0%, 75%),
				inset 0 0px 5px hsl(0, 0%, 95%),
				inset 0 -1px 5px hsl(0, 0%, 95%);
	z-index: 1;
}
.circ1 {
	display: block;
    position: absolute;
	width: 87px;
    height: 57px;
    top: 0; 
    left: 0;
    background: linear-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%));
    box-shadow: 
        inset 0 1px 1px hsl(0, 0%, 95%),
		inset 0 -1px 1px hsl(0, 0%, 95%);
        	 
}
.dot1:before {
    content: "Enter";
	color: hsl(0, 0%, 60%);
    position: absolute;
    left: 20%;
    top: 15%;
	font-size: 20px; 
 
}
.switch1:active .dot1:before {
    content: "Enter";
}
.switch1:active .dot1 {
	background: radial-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%));
	box-shadow: -2px 4px hsl(0, 0%, 75%),
				0px -1px hsl(0, 0%, 75%),
				inset 0 1px 2px hsl(0, 0%, 95%),
				inset 0 -1px 2px hsl(0, 0%, 95%);
	
}

HTML

<div class="switch1">
	<div class="circ1">
	<a class="dot1"></a>
	</div>
</div> 

Не во всех кнопках свойство transform указано с необходимыми перфиксами, так что не забудьте их добавить, по примеру десятой кнопки.

Желаю творческих успехов.

Текст появляющийся на изображениях CSS < < < ◊ > > > Анимация для шапки сайта


Перекур

Америка борется с терроризмом и ожирением. Особая удача, когда попадается жирный террорист

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

4 комментария на «Красивые кнопки CSS с оригинальными эффектами»

  1. stariс говорит:

    Кнопка (button) и ссылка (<a></a>) строчные элементы. Чтоб расположить их друг под другом есть два варианта. Можно вставить между ними тег <br> (перенос строки), но таким способом кнопки можно расположить только слева, т.е их нельзя будет равномерно подвинуть на странице, или такое действие потребует начительных усилий.

    И можно заключить кнопки в блочные теги (<p></p> или <div></div>). Блочные теги всегда начинаются с новой строки. Блочные элементы можно двигать (позиционировать) как угодно.

    Можно заключить все кнопки в блок div, а уже внутри этого блока заключить каждую кнопку в блок p (абзац), тогда все они расположаться друг под другом и двигать (позиционировать) их можно будет сразу все вместе.

  2. Roman говорит:

    Здравствуйте!
    Подскажите пожалуйста как сделать так, чтобы кнопки распологались одна под другой.
    Заранее спасибо.

  3. stariс говорит:

    Ссылка не блочный элемент. Её можно засунуть в любое место тега body. Если у вас проблемы с размещением кнопок — спросите поподробнее, разберёмся.

  4. Александр говорит:

    Здравствуйте! скажите пожалуйста, в какое место кода, нужно вставить ссылку которая будет вести на сторонний сайт?
    Спасибо за разъяснение!

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

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