Инверсия цвета кнопок CSS
Уроки Инверсия цвета кнопок CSS
5 апреля 2015
2202
инверсия цвета кнопок, css

Инверсия цвета кнопок CSS

Сложность Рубрика CSS Браузеры
Демонстрация » Скачать »

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

На самом деле, смотрится это очень даже красиво и подходит совершенно идеально под стиль дизайна Flat, когда цвета плоского стиля сочетаются между собой. Смотрится это довольно таки гармонично и лаконично вписывается в дизайн сайта. Я лично, придерживаюсь данной версии, по сколько она мне очень нравится и безусловно проста в использовании.

 

Первый шаг. HTML. Главная страница index.php.

 

Создаем простую ссылку и прописываем ей класс button. Кнопка у нас получится синее-белых цветов.

<a href="#" class="button">Синее-белая</a>

 

Вторая часть. CSS. Стили.

 

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

 

a{
	padding: 20px;
	margin: 20px;
	border-radius: 10px;
	text-decoration: none;
	font-size: 20px;
}

a.button{
	color: #5a00ff;
	background: #ffffff;
	border: 1px solid #5a00ff;
}

a.button:hover{
	color: #ffffff;
	background: #5a00ff;
	border: 1px solid #5a00ff;
}

 

В целом, материал был очень простым, кому понравился ставьте лайки и большое спасибо за внимание!





Роман Краутер