Css кнопки для сайта: Примеры. Стили кнопок CSS

02.07.2018 alexxlab

Содержание

Большая коллекция простых кнопок CSS

Большая коллекция простых кнопок CSS, рабочие примеры кнопки HTML с анимацией для сайта, трехмерные и эффектные кнопочки CSS, красивое оформление ссылок перехода, профиля, переключали, подробно, прочитать, скачать, открыть, нажать, купить, цена и другие варианты интересных и готовых веб-разработок собранные в количестве более 20 в одном месте тут. Простая HTML кнопка для сайта делает в два счёта, её легко сможет добавить веб-мастер и модифицировать по своему усмотрению. Лучшая коллекция с большим количеством простых кнопок HTML/CSS для сайта представлена здесь, каждый рабочий пример кнопки CSS можно попробовать. Есть кнопки с анимацией, трехмерные, использующие эффекты CSS, созданы для классного оформление ссылок перехода, или ссылок подробно, скачать, пройти, прочитать, нажать, открыть, купить, цена и разные интересные варианты в количестве более 15 штук в одном месте.

Желаете самостоятельно вставить, отредактировать, интегрировать, или получить лучший вид HTML (ссылок или переключателей), интегрировать кнопку CSS в шаблон DLE или на страницу HTML? На этой странице представлено более двадцати готовых примеров с разными вариантами оформления и дизайна. Вам достаточно будет скопировать код в файл с расширением *.css вашей площадке, код ссылки HTML сохранить в нужном месте и новая кнопка готова к использованию.

Примеры кнопок CSS3.

№1

Идеальный и эффективный способ простым движением поменять цвет, шрифт, тень, размер блоков и форм, градиент и другие стили кнопки HTML не нарушая целостности кода воспользоваться инструментов вашего браузера. Подойдет для этих целей Мозила, Опера, Гугл Хром, Яндекс.Браузер и другие программы в которых встроен инструмент «Веб-разработка».

Как пользоваться инструментом «Веб-разработка Firefox Mozilla» подробно инструкция в картинках.

Примеры классных стилей кнопок CSS

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

HTML

		
						


<a href="#">
     Click me!
</a>


<a href="#">
     Click me!
</a>

<a href="#">
     Click me!
</a>

<a href="#">
     Click me!
</a>

<a href="#">
     Click me!
</a>

CSS







Примеры.
№2


 HTML
<a href='#' >Download</a>

CSS№3


 HTML
<a href="#">Green button</a>

CSS
№4


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

CSS
№5


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

CSS
№6


 HTML
<a href="#">Buttons</a>
  
CSS
№7


 HTML
<a href="#"><span>✓</span>Story Hack</a>

CSS
№8


 HTML
<a href="#">Buttons</a>

CSS
№9


 HTML
<a href="#">Download</a>

CSS
№10


 HTML
<a href="#">Блик</a>

CSS
№11


 HTML
<a href="#">Download</a>

CSS
№12


 HTML
<a href="#">Download</a>

CSS
№13


 HTML
<a href="#">Home</a>

 CSS
№14


 HTML
<a href="#">Download</a>

CSS
№15


 HTML
<a href="#">Small Button</a>

CSS
№16

Demo

 HTML
<a href=""><span>Demo</span></a>

CSS
№17


 HTML
<a href="#">
<span>Стоимость</span>
<span>100$</span>
<span><span></span></span>
</a>

CSSКартинка стрелки.
№18



 HTML
<div><a href="#">Download</a></div>

CSS
№20


  HTML
<a href="#">Download</a>

CSS
№21

Button!

 HTML
<a href="#">Button!</a>

CSS
№22


 HTML
<a href="#">Download</a>

CSS№23


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

CSS
Стили кнопок при необходимости можно отредактировать полностью под свой дизайн. Верстка кнопок на сайте 
	
	Вы здесь:
								Главная					 — 			HTML					 — 			HTML 5					 — 			Верстка кнопок на сайте			
	
		
					
				
			
				
 Какие кнопки обычно встречаются на сайте? Я разделили бы их на два вида: кнопки внутри формы и кнопки-ссылки. И те и другие необходимо уметь верстать.

 Кнопки внутри формы 

 Тег input 

Вставляются тегом input, c типом submit – что означает кнопку для отправки формы.


<input type="submit" value="Отправить">



 Тег button 
 
Вставляет на сайт кликабельную кнопку, работающую, в любом месте сайта.
 
Тег button по сравнению с input, располагает большими возможностями, внутри него можно вставлять любой контент (текст, изображения).
 
Но не надо забывать, что если при нажатии кнопки, должны отправиться данные на сервер, то теги 
 input и button, следует поместить внутри тега form.
 
Теги input и button могут обрабатываться скриптом, например при событии клика.


<button type="button">Нажми меня!</button>



 Пример верстки кнопок внутри формы 

 Button 

See the Pen CSS3 responsive form by porsake (@porsake) on CodePen.


 Input 

 See the Pen Responsive Form by porsake (@porsake) on CodePen.




 Кнопки-ссылки 

Практически на каждом сайте встречаются ссылки в виде тега a, но оформленные с помощью CSS, как кнопки. Чаще всего такие кнопки-ссылки, используются как элементы навигации на сайте: пункты меню, переход на следующую страницу, в рекламном блоке. Вот такие дизайнерские кнопочки не имеет смысла вставлять тегом button, лучше сразу вставлять тегом a с каким-нибудь классом или ID. Поскольку эта кнопка будет куда-то все равно ссылаться.
 


<a href="#">Learn More</a>



 Пример верстки кнопки ссылки #1 

 HTML 


<a href="#">Купить</a>



 CSS 

Тег a по умолчанию является строчным элементом, если не задать ему display: inline-block, то к нему не применятся отступы, рамки и другие стили.

 
body {

  background-color: #951a46; /* цвет фона всей страницы */

  font-family: Roboto, sans-serif; /* семейство шрифта */

}.button {

  display: inline-block; /* строчно-блочный */

  margin: 100px 400px; /* отступы от края браузера */
 
  padding: 20px 60px; /* расстояние от текста до края кнопки */

  background-color: #e44b9b; /* цвет кнопки  */

  box-shadow: 0px 6px #f7f8e8; /* задана тень */

  border-radius: 5px; /* скругление углов */

  font-size: 27px; /* размер шрифта */

  text-transform: uppercase; /* трансформировать в заглавные буквы */

  text-decoration: none; /* не подчеркивать ссылку */

  transition: 0.2s; /* плавный ховер эффект */

  color: #f7f8e8; /* цвет текста на кнопке */

}
.button:hover {

  background-color: #949a9a; /* замена цвета кнопки при наведении */

}



 Скриншот 

 


 Пример верстки кнопки ссылки #2 

 HTML 


<a href="#">Shop Now</a>



 CSS 


body {

  background-color: #3cc395;

}.button {

  display: inline-block;

  margin: 100px 400px;

  color: #fff;

  font-family: BebasNeue;

  font-size: 160%;

  font-weight: bold;

  text-transform: uppercase;

  background-color: transparent;

  border-radius: 13px;

  border: 3px solid #fff;

  padding: 6px 20px;
 
}



 Скриншот 

		
			
				
					
						
					
					Создано 24.04.2019 10:33:30				
				
					
					Михаил Русаков				
			
			
		
	
	
		Предыдущая статья		Следующая статья		
	
	
		Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
	
	
		Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
		Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
	
	Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
	
		Порекомендуйте эту статью друзьям:
		
		
		
	
	Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
	
		
			Кнопка:
			
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
			Она выглядит вот так: 
		
		
			Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
			Она выглядит вот так: Как создать свой сайт
		
		BB-код ссылки для форумов (например, можете поставить её в подписи):
			
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
		
	
	
7 самых лучших генераторов CSS3 кнопок для Ваших сайтов

	
		

Здравствуйте, дорогие читатели блога. В этот чудный день я хочу представить Вам довольно полезную подборку генераторов CSS3 кнопок для Вашего сайта.
Я думаю, что эти генераторы существенно облегчат Вам задачу с поиском нужной кнопки на сайт. Так как здесь Вы сможете создать любую CSS кнопку, а так же произвести над ней очень тонкую настройку. Потому что все генераторы которые здесь достаточно функциональны. 
Так что, друзья, я смело могу посоветовать Вам добавить эту страницу в закладки.
Ну а теперь давайте перейдём к кнопкам.

Очень красивый и функциональный генератор CSS кнопок для сайта. Есть огромный выбор существующих шаблонов, а так же их тонкая настройка.


Классный генератор кнопок, с помощью которого Вы можете создать и получить множество различных CSS кнопок. Так же этот генератор очень функциональный, а так же никаких картинок только CSS.


Очень просто но к тому же достаточно функциональный генератор кнопок на CSS. тут есть все функции с помощью которых Вы сможете сделать именно то, что Вам нужно.


Простой генератор, в котором есть самые основные функции для создания красивой кнопки, конечно же поддерживается градиент заливка.


Красивый и современный генератор CSS3 кнопок на сайт. Как обычно тут есть всё чтобы создать крутую кнопку для Вашего сайта.


Этот генератор сможет сделать самую лучшую CSS3 кнопку для Вас.


Самый классный генератор кнопок. Очень понравилось множество разнообразных функций, которые помогут точно настроить кнопку. А так же присутствует множество не плохих уже настроенных шаблонов.

	
		
	 Кнопки CSS эффекты при наведении и нажатии 
						Здесь не про дизайн. Здесь готовый код различных эффектов с подробными комментариями. 
В дальнейшем эти эффекты можно будет применить к любой дизайнерской идее и создать оригинальную кнопку, которой нет больше ни у кого в интернете.




Кое-что про дизайн в статье Блок с закруглёнными углами и тенью. Эллипс
Нужно просто поиграть с цифрами в свойствах border-radius и box-shadow, поэкспериментировать со свойствами gradient и background
Все кнопки, показанные ниже, действующие. Выбирайте вариант, который вам понравится.
Варианты кнопок будут добавляться по мере создания.
Чтоб быстро увидеть код, понравившейся кнопки, щёлкните по ссылке «Код», рядом с кнопкой.
При наведении:
Кнопка Градиент Код
Кнопка Наплывание Код
Кнопка Обесцвечивание Код
Кнопка Всплывание Код
Кнопка Искажение Код
Кнопка Многоцветная рамка Код
Кнопка 3D кнопка Код
 Появление текста вращением Код
 Появление текста из глубины Код
Кнопка Появление картинки Код
При нажатии:

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

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

Клавиша Код
 
Наведение и нажатие.
Кнопка
 
Выпуклая кнопка Код
 



Градиент

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</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>Кнопка</button>
</body>
</html>

Наплывание

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
.two {  /* Внешний вид кнопки */
color: #524E49;  /* Цвет текста */
background: #fdeaa8 ; /* Фоновый цвет */
padding: 10px; /* Внутренний отступ текста от границ блока. Определяет размер кнопки */
font-size: 20px;  /* Размер текста */
border-radius: 5px;  /* Радиус закругления уголков */
box-shadow: 0px 1px 3px;  /* Тень */
position: relative;  /* Относительное позиционирование, для установки абсолютного позиционирования для наплывания */
}
.two:before {  /* Псевдо элемент для создания наплывания */
content:'';  /* Обязательное свойство псевдоэлемента :before */
position: absolute;  /* Позиционируем абсолютно */
top: 0px;  /* Позиция по границам блока */
left: 0px;
width: 100%;  /* Ширина по границам кнопки */
height: 0px; /* Высота 0, поэтому невиден */
background: rgba(148,144,143,0.4); /* Фоновый цвет наплывания */
border-radius: 5px;  /* Радиус уголков */
transition: all 0.5s ease-out;  /* Анимация. Движение. Трансформируются все свойства (all) в течении 0.5 секунды, быстро начинается и к концу замедляется (ease-out)  */
}
.two:hover:before { /* При наведении */
height: 42px;   /* Высота наплывания становится равной высоте кнопки */
}
</style>
</head>
<body>

<button>Кнопка</button>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
.three {  /* Внешний вид кнопки */
color: #524E49;  /* Цвет текста  в кнопке */
background: #fdeaa8;  /* Фоновый цвет */
padding: 10px;  /* Отступ текста от границ - определяет размер кнопки */
font-size: 20px;  /* Размер текста */
border-radius: 5px;  /* Закругление уголков */
box-shadow: 0px 1px 3px;  /* Тень */
}
/* Меняем внешний вид при наведении */
.three:hover {  /* Добавляем псевдокласс :hover */
background: rgba(0,0,0,0);/* Меняем фоновый цвет */
color: #3a7999;  /* Меняем цвет текста */
box-shadow: inset 0 0 0 3px #3a7999;  /* Меняем тень */
}
</style>
</head>
<body>
<button>Кнопка</button>
</body>
</html>




Всплывание

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.elementy {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый  цвет */
padding: 10px; /* Внутренний отступ текста от границ */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
/* Задаём анимацию (перемещение). Для всех действий (all) Время перемещения (0.8 сек.) Направление перемещения (cubic-bezier(0.165, 0.84, 0.44, 1)) */
-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 { /* Добавляем псевдокласс :hover */
/* Задаём расстояние, на которое сместится кнопка */
-webkit-transform: translate(10px);
transform: translate(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) /*   Изменяем тень */
}
</style>
</head>
<body>
<button>Кнопка</button>
</body>
</html>

Искажение

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.five {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Внутренний отступ */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
/* Задаём анимацию. Для всех элементов (all), время анимации (500ms) */
transition: all 500ms ease-out;
}
/* Эффект при наведении */
.five:hover { /* Добавляем псевдокласс :hover */
transform: skew(10deg);/* Задаём действие анимации - отклонение на 10 градусов */
}
</style>
</head>
<body>
<button>Кнопка</button>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.six {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Отступ текста от границ. Определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
/* Задаём анимацию. Для всех элементов (all), время появления рамки (500ms), быстро начинается потом замедляется  (ease-out) */
transition: all 500ms ease-out;
}
/* Эффект при наведении */
.six:hover { /* Добавляем псевдокласс :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>Кнопка</button>
</body>
</html>





3D кнопка

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.seven {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Отступ текста от границ */
font-size: 20px; /*Размер текста  */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
position: relative; /* Задаём относительное позиционирование */
transition: all 500ms ease-out; /* Задаём анимацию с временем выполнения 500ms */
transform-style: preserve-3d; /* Трансформация показывается как 3D */
}
/* Создаём псевдо элемент - верхняя грань кнопки */
.seven:after { /* Добавляем псевдо элемент :after */
content: 'Кнопка'; /* Текст в псевдо элементе */
position: absolute; /* Позиционируем абсолютно, относительно основного блока */
top: -50%;
left: 0px;
width: 100%; /* Ширина */
background: #fdeaa8; /* Фоновый цвет */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
transform-origin: bottom; /* Точка, относительно которой будет выполнятся вращение */
transform: rotateX(90deg); /* Размещаем в горизонтальной плоскости, в результате чего псевдо элемент не виден */
}
/* Эффект при наведении */
.seven:hover { /* Добавляем псевдо класс :hover */
transform-origin: bottom; /* Определяем точку, относительно которой происходит вращение */
transform: rotateX(-90deg); /* Поворачиваем на 90 градусов */
}
</style>
</head>
<body>
<button>Кнопка</button>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид */
.eight {
background: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
background: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444); /* Фоновый цвет - радиальный градиент */
width: 90px; /* Ширина */
height: 40px; /* Высота */
padding: 10px; /* Внутренний отступ */
border-radius: 5px; /* Закругление углов */
box-shadow: 0px 2px 4px; /* Тень */
display: inline-block; /* Встроенный элемент */
position: relative; /* Относительное позиционирование, для абсолютного позиционирования других элементов */
text-decoration: none; /* Убираем подчёркивание текста */
}
/* Создаём псевдоэлемент - текст */
.eight:after { /* Добавляем псевдоэлемент :after */
width: 80%; /* Ширина относительно родительского блока */
color: red; /* Цвет текста */
font-family: 'Lucida Console'; /* Шрифт текста */
font-size: 18px; /* Размер текста */
text-align: center; /* Выравнивание по центру */
content: attr(title); /* Текс берётся из атрибута title */
display: block; /* Блочный элемент */
opacity: 0; /* Невидимый */
position: absolute; /* Позиционируется абсолютно */
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%; /* Точка от которой происходит анимация - центр */
-webkit-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out; /* Анимация. Для всех элементов, время - 550ms, начинается и заканчивается медленно */
-webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
transform: scale(0) rotate(-360deg) translateY(-50%); /* Вращение на 360 градусов */
z-index: 3; /* Поверх всех элементов */
}
/* Эффект при наведении */
.eight:hover:after { /* Добавляем псевдокласс :hover */
opacity: 1; /* Видимый */
-webkit-transform: scale(1) rotate(0deg) translateY(-50%);
transform: scale(1) rotate(0deg) translateY(-50%); /* Точка трансформации - центр */
}
</style>
</head>
<body>
<button title="knopka" ></button>
</body>
</html>

Появление текста из глубины

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид */
.nine {
background: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
background: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444); /* Фоновый цвет - радиальный градиент */
width: 90px; /* Ширина */
height: 40px; /* Высота */
padding: 10px; /* Внутренний отступ */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 2px 4px; /* Тень */
display: inline-block; /* Встроенный элемент со свойствами блочного */
position: relative; /* Относительное позиционирование, для абсолютного позиционирования появляющегося текста */
text-decoration: none; /* Убираем подчёркивание */
}
/* Создаём псевдоэлемент для появляющегося текста */
.nine:after {
width: 80%; /* Ширина элемента */
color: red; /* Цвет текста */
font-family: 'Lucida Console'; /* Шрифт текста */
content: attr(title); /* Текст берётся из атрибута title */
display: block; /* Блочный элемент */
font-size: 18px; /* Размер текста */
text-align: center; /* Выравнивание текста по центру */
opacity: 0; /* Невидимый */
position: absolute; /* Позиционируем абсолютно по центру родительского блока */
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%; /* Точка начала трансформации по центру */
-webkit-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%); /* Масштаб 0 и отодвигаем в глубину */
-webkit-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out; /* Анимация. Для всех элементов (all), время действия 550ms, медленно начинается и заканчивается (ease-in-out) */
z-index: 3; /* Поверх всех элементов */
}
/* Эффект при наведении */
.nine:hover:after {
opacity: 1; /* Видимый */
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%); /* Масштаб 1 х 1 (scale(1)), расположение по центру в глубине */
}
</style>
</head>
<body>
<button title="knopka" ></button>
</body>
</html>

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





<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид */
.ten {
color: #524E49; /* Цвет текста */
background: #F7E09C; /* Фоновый цвет */
padding: 10px 35px; /* Внутренний отступ. Определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px;  /* Тень */
position: relative; /* Относительное позиционирование для абсолютного позиционирования картинки */
}
/* Картинка */
.ten img {
position: absolute; /* Позиционируем абсолютно */
top: 7px; /* По середине */
left: -30px; /* Выносим за пределы кнопки */
transition: all 200ms ease; /* Анимация появления. Время анимации 200 ms */
}
/* Эффект при наведении */
.ten:hover img {
left: 5px; /* Возвращаем картинку в кнопку */
}
</style>
</head>
<body>
<!--Картинка размещается внутри кнопки-->
<button><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%);
background: -webkit-linear-gradient(top,  hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%); /* Фоновый цвет - линейный градиент. Цвет задан в формате hsl, но можно задать в любом доступном в веб формате */
сursor: pointer; /* Курсор в виде ладошки */
transform: rotate(30deg); /* Поворачиваем на 30 градусов */
}
/* Эффект при нажатии */
.round:active { /* Добавляем псевдокласс :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%);
background: -webkit-linear-gradient(top,  hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%); /* Изменяем значения линейного градиента */
}
HTML
<div>
<!--Вместо кнопки (buttom) используется ссылка (a)-->
<a href="*"></a>
</div>

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

CSS
/* Оболочка */
.switch {
width: 70px; /* Ширина */
height: 70px; /* Высота */
position: relative; /* Относительное позиционирование, для абсолютного позиционирования других элементов */
cursor: pointer; /* Курсор в виде ладошки */
}
/* Внутренний круг */
.dot {
position: absolute; /* Позиционируем абсолютно относительно оболочки */
top: 7%;
left: 7%;
width: 70px; /* Ширина */
height: 70px; /* Высота */
border-radius: 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%);
}
/* Наружный круг */
.circ {
position: absolute; /* Позиционируем абсолютно относительно оболочки по центру внутреннего */
top: 0;
left: 0;
width: 82px; /* Ширина */
height: 82px; /* Высота */
border-radius: 50%; /* Делаем круг */
background: linear-gradient(#ccc, #fff);
background: -webkit-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; /* Позиционируем абсолютно по центру */
left: 40%;
top: 40%;
width: 20%; /* Ширина */
height: 20%; /* Высота */
border-radius: 50%; /* Делаем круг */
background: radial-gradient(#fff, #333);
background: -webkit-radial-gradient(#fff, #333); /* Фоновый цвет - радиальный градиент */
}
/* Эффект при нажатии */
.switch:active .dot:before {
content: "";
background: radial-gradient(#fff, #02A829);
background: -webkit-radial-gradient(#fff, #02A829); /* Меняем цвет индикатора */
}
.switch:active .dot {
background: radial-gradient(#fff, #ccc);
background: -webkit-radial-gradient(#fff, #ccc); /* Меняем фоновый цвет внутреннего круга */
width: 69px; /* Уменьшаем ширину внутреннего круга */
height: 69px; /* Уменьшаем высоту внутреннего круга */
}
HTML
<!--Оболочка-->
<div>
<!--Наружный круг-->
<div>
<!--Внутренний круг-->
<span></span>
<!--Ссылка для адреса перехода-->
<a href=""></a>
</div>
</div>

Клавиша

CSS
.switch2 {
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;
}
.switch2:active .dot1:before {
content: "Enter";
}
.switch2: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>
<div>
<a></a>
</div>
</div>





Выпуклая кнопка

CSS
.blok101{
max-width:60px;
padding: 1em;
border-radius: 10px;
background: rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;
}
.blok101:hover{
transform: skewX(10deg);
}
.blok101:active{
color:red;
max-width:55px;
padding: 1em;
border-radius: 8px;
background: rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
}
HTML
<div>Кнопка</div>

Не во всех кнопках свойство transform указано с необходимыми перфиксами, так что не забудьте их добавить, по примеру десятой кнопки.
Желаю творческих успехов.
Текст появляющийся на изображениях CSS < < < В раздел > > > Анимация для шапки сайта


											 Создаем красивые кнопки для сайта на CSS3 



Красивы кнопки будут не только привлекать взор посетителя, но и дополнять общую картину сайта с помощью простой и в тоже время, уникальной анимацией. Сейчас на просторах веб-дизайна царит минимализм, все чаще разработчики стараются придерживаться этой тенденции и ровняться на дизайн Metro. В данном уроке мы рассмотрим именно такие кнопки. Этот набор кнопок состоит из простых, креативных кнопок с простыми стилями и эффектами. На определенных кнопках эффекты можно увидеть при наведении, на некоторых при нажатии.


 
Главным образом используются CSS переходы, CSS анимация и для некоторых кнопок мы используем JavaScript для добавления и удаления классов. Иконки, которые мы используем совместно с псевдо-классами :before и :after, создали при помощи сервиса IcoMoon
 Шаг 1. HTML 
Для начала нам необходимо создать простую разметку, мы просто добавляем общий класс и один уникальный:









<button>Кнопка</button>






Следует отметить, что мы используем определенные пронумерованные классы для различных наборов стилей кнопок. Каждая кнопка имеет дополнительный уникальный класс.

С использованием иконки, мы добавляем класс иконки, который будет использовать псевдо элемент :before.

 Шаг 2. CSS 
Теперь рассмотрим стили, мы приведем пример стилизации одной кнопки, более детально можно рассмотреть в исходниках:









.btn-6d {
border: 2px dashed #226fbe;
}
 
.btn-6d:hover {
background: transparent;
color: #226fbe;
}






В демонстрации мы рассмотрели несколько примеров кнопок, их разметки практически идентичны, необходимо изменить параметры вывода кнопки.
 Вот и все. Готово! 
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
 Читайте также:  

 Кнопки HTML 
						Кнопка — самый часто используемый элемент WEB. Её HTML-код очень простой, и сейчас я вам покажу как он пишется и расскажу, что означают его символы и буквы.

В предыдущей статье мы научились создавать рамки.
В этой статье я покажу Вам несколько вариантов html кода для кнопок которые создаются при помощи тега button.
Тег button — встраиваемый элемент. Его можно вставить в любую строку кода или текста.
Вместе с тем его можно вставить в любой блочный элемент, например теги (p или div)




Первый пример рассмотрим в HTML документе, а в остальных будет изменяться только содержание тега body
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Кнопки HTML</title>
</head>
<body>
<p><button>Кнопка</button></p>
</body>
</html>
А вот результат, можно пощёлкать. Тег button по умолчанию создаёт интерактивную кнопку.
Кнопка
Следующую кнопку сделаем с применением тегов таблиц.
Код:
<p><button> <table border="1"> <tr> <td>Кнопка</td></tr></table></button></p>
Результат:



К сожалению настройки моей темы не позволяют мне в полной мере использовать оформление таблицы, но об этом очень подробно рассказано и показано в статье Таблицы HTML



Оформление кнопки
Дальше немного интереснее, так как в следующем примере мы в тег button, введём атрибут style и сможем использовать стилевые свойства.
А это значит, что кнопке можно будет придать более оригинальное оформление.
Код:
<button>Кнопка</button>
Результат действующий, можно пощёлкать, и посмотреть, как кнопка работает.
 Кнопка
Давайте подробно рассмотрим, какие свойства мы применили для оформления.
1. background: #fdeaa8; — цвет кнопки;
2. width: 80px; — ширина кнопки;
3. height: 40px; — высота кнопки;
4. border-radius: 5px; — закруглённые уголки, если вместо 5px поставить 50%/50%, то кнопка станет округлой;
5. box-shadow: 0px 1px 3px; — создаёт тень, делает кнопку более выпуклой;
6. font-size: 20px; — размер текста;
В тег button можно вставить и картинку.
Код:
<button><img src="images/s20.png">Кнопка</button>
Результат:
Кнопка
Ещё один атрибут, который можно применить для кнопки — это title.
Его действие заключается в том, что при наведении курсора на кнопку, будет появляться окно подсказки, с текстом, который мы в этот атрибут введём.
Обычно в нём указывается место, в которое ведёт данная кнопка.



Код:
<button title="Страница 23"style="border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png">Кнопка</button>
Результат:
Кнопка
Как сделать кнопку ссылкой.
Для этого к тегу button применяется событие onclick.
В значении указывается адрес, по которому и будет осуществлён переход. К примеру так: 
onclick=»location.href=’https://starper55plys.ru/’;».
И полный код кнопки будет выглядеть так:
<button title="Страница 23"border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png">Кнопка</button>

Теперь можно этой кнопкой перенаправлять посетителя на другую страницу сайта, или на другой сайт.
Если расположить несколько button в строку друг за другом, то получится вот такое меню, которое можно использовать как постраничную навигацию.
1 2 3 4
Ссылка вместо кнопки
Если не использовать кнопку в скриптах, то её можно сделать практически из любого тега, например из ссылки <а></а>.
Правда такая кнопка не будет интерактивной по умолчанию, но интерактивность ей можно будет легко придать стилевыми свойствами.
Вот самая простая форма, которую можно придать ссылке

<a href="*">Кнопка</a>

Кнопка
А вот как придать ей интерактивность трансформацию и анимацию, смотрите в статье Кнопки CSS с оригинальными эффектами
Желаю творческих успехов.


Перемена
Настоящий еврей зарабатывает тысячу долларов в месяц, две тысячи отдает жене, а на оставшиеся три живет сам.
Рамки html < < < В раздел > > > Красивая заглавная буква и бегущая строка HTML

											 Кнопки | htmlbook.ru
 Кнопки являются одним из самых понятных и интуитивных элементов интерфейса.  По их виду сразу становится понятно, что единственное действие, которое с ними можно  производить — это нажимать на них. За счёт этой особенности кнопки часто  применяются в формах, особенно при их отправке и очистке. 
  Кнопку на веб-странице можно создать двумя способами — с помощью тега <input> и тега <button>. 
  Рассмотрим вначале добавление кнопки через <input>  и его синтаксис.
<input type="button" атрибуты>
Атрибуты кнопки перечислены в табл. 1.
Табл. 1. Атрибуты кнопокАтрибут Описание
name Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value Значение кнопки и одновременно надпись на ней.
Создание кнопки  показано в примере 1.
Пример 1. Добавление кнопки
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input type="button" value=" Нажми меня нежно "></p>
  </form>
 </body>
</html>
Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество  пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Второй способ создания кнопки основан на использовании тега <button>.     Он по своему действию напоминает результат, получаемый с помощью тега <input>.     Но в отличие от него предлагает     расширенные возможности по созданию кнопок. Например, на подобной кнопке можно     размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны   разные виды кнопок, полученные с помощью <button>.
Рис. 2. Кнопки, созданные с помощью <button>
Синтаксис создания такой кнопки следующий.
<button атрибуты>Надпись на кнопке</button>
Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то тег <img> добавляется внутрь <button>, как показано в примере 2.
Пример 2. Рисунок на кнопке
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><button>Кнопка с текстом</button> 
   <button>
    <img src="images/umbrella.gif" alt=""> 
    Кнопка с рисунком
   </button></p>
  </form>
 </body>
</html>
В данном примере показано создание обычной кнопки с текстом, при этом , а также кнопки     с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого     контейнера <button>, но пробелы игнорируются,     поэтому простым увеличением их количества, как в случае использования <input>,     ширину кнопки изменить не удастся.
Кнопка Submit
 Для отправки данных на сервер предназначена специальная кнопка Submit. Её     вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение     серверной программы, указанной атрибутом action тега <form>. Эта программа, называемая еще обработчиком     формы, получает данные, введенные пользователем в полях формы, производит с     ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа.     Что именно делает обработчик, зависит от автора сайта, например, подобная технология     применяется при создании опросов, форумов, тестов и многих других     вещей.
 Синтаксис создания кнопки Submit зависит от используемого тега <input> или <button>.
<input type="submit" атрибуты>
<button type="submit">Надпись на кнопке</button>
Атрибуты те же, что и у рядовых кнопок (пример 3).
Пример 3. Отправка данных на сервер
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input name="login"></p>
   <p><input type="submit"></p>
  </form>
 </body>
</html>
Атрибут name для этого типа кнопки можно не писать. Если не указать значение value,     то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.
 Кнопка Reset
 При нажатии на кнопку Reset данные формы возвращаются в первоначальное значение.     Как правило, эту кнопку применяют для очистки введенной в полях формы информации.     Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы     по ошибке на нее не нажать, ведь тогда придётся заполнять форму заново.
 Синтаксис создания указанной кнопки прост и похож на другие кнопки.
<input type="reset" атрибуты>
<button type="reset">Надпись на кнопке</button>
В примере 4 показана форма с одним текстовым полем, которое уже содержит     предварительно введённый текст с помощью атрибута value тега <input>. После изменения текста и нажатия     на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится     надпись «Введите текст».
 Пример 4. Кнопка для очистки формы
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input value="Введите текст"></p>
   <p><input type="submit" value="Отправить">
      <input type="reset" value="Очистить"></p>
  </form>
 </body>
</html>
Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке     опустить, иными словами, не задавать атрибут value,   на кнопке по умолчанию будет добавлен текст «Очистить».
 Как я могу применить CSS ко всем кнопкам, которые присутствуют на этой странице? Переполнение стека Товары
 Клиенты
 Случаи использования
 Переполнение стека
 Публичные вопросы и ответы
 Команды
 Частные вопросы и ответы для вашей команды
 предприятие
 Частные вопросы и ответы для вашего предприятия
 работы
 Программирование и связанные с ним технические возможности карьерного роста
 Талант
 Нанимать технический талант
 реклама
 Связаться с разработчиками по всему миру
 , CSS — Создание ссылки в HTML 
 Переполнение стека Товары
 Клиенты
 Случаи использования
 Переполнение стека
 Публичные вопросы и ответы
 Команды
 Частные вопросы и ответы для вашей команды
 предприятие
 Частные вопросы и ответы для вашего предприятия
 работы
 Программирование и связанные с ним технические возможности карьерного роста
 Талант
 Нанимать технический талант
 реклама
 Связаться с разработчиками по всему миру
 , Кнопки начальной загрузки 
 Стили кнопок 
 Bootstrap предоставляет различные стили кнопок:
 основной
По умолчанию
первичный
успех
Информация
Предупреждение
Опасность
Ссылка на сайт
 Для достижения стилей кнопок выше, Bootstrap имеет следующие классы:
  .btn 
  .btn-default 
  .btn-primary 
 .btn-success 
  .btn-info 
  .btn-предупреждение 
  .btn-опасность 
  .btn-link 
 В следующем примере показан код для различных стилей кнопок:
 Пример