Стилизация кнопок CSS

05.02.2021
66795
1 комментарий
Стилизация ссылок и кнопок на примере разных сайтов с поддержкой разными состояний – наведение курсора, нажатие, попадание в фокус и заблокированное состояние элемента.
1 
<a class="btn" href="##">Link</a>
<input class="btn" type="button" value="Input">    
<button class="btn">Button</button>
<button class="btn" disabled>Disabled</button>
HTML 
.btn {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 25px;
	margin: 0 15px 15px 0;
	outline: none;
	border: 1px solid #fff;
	border-radius: 50px;
	height: 46px;
	line-height: 46px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #444;
	background-color: #fff;
	box-shadow: 0 4px 6px rgb(65 132 144 / 10%), 0 1px 3px rgb(0 0 0 / 8%);
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;  
	vertical-align: top;
	transition: box-shadow 0.2s;
}
.btn:focus-visible {
	border: 1px solid #4c51f9;
	outline: none;
}
.btn:hover {
	transition: all 0.2s;
	box-shadow: 0 7px 14px rgb(65 132 144 / 10%), 0 3px 6px rgb(0 0 0 / 8%);
}
.btn:active {
	background-color: #808080;
}
.btn:disabled {
	background-color: #eee;
	border-color: #eee;
	color: #444;
	cursor: not-allowed;
}
CSS

Результат:

2 
<a class="btn" href="##"><span>Link</span></a> 
<button class="btn"><span>Button</span></button>
<button class="btn" disabled><span>Disabled</span></button>
HTML 
.btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 1px;
	margin: 0 15px 15px 0;
	outline: none;
	border: 1px solid #F18230;
	border-radius: 25px;
	height: 46px;
	line-height: 0;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: #fff;
	background-color: #fff;
	position: relative;
	overflow: hidden;
	vertical-align: top;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
}
.btn span {
	display: block;	
	box-sizing: border-box;
	padding: 0 25px;    
	height: 42px;
	line-height: 38px;    
	border: 1px solid #F18230;
	border-radius: 25px;    
	font-size: 14px;
	color: #FFFFFF;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #F18230;
	text-align: center;
	font-weight: 600;
}
.btn:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}
.btn:hover span {
	background-color: #fba768
}
.btn:active span {
	background-color: #c17237 !important;
}
.btn:disabled {
	opacity: 0.65;
	pointer-events: none;
}
CSS

Результат:

3 
<a class="btn" href="##">Link</a>
<input class="btn" type="button" value="Input">    
<button class="btn">Button</button>
<button class="btn" disabled>Disabled</button>
HTML 
.btn {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 20px;
	margin: 0 15px 15px 0;
	outline: none;
	border: none;  
	border-radius: 4px;
	height: 32px;
	line-height: 32px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: #fff;
	background-color: #3775dd;
	box-shadow: 0 2px #21487f;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;  
	vertical-align: top;
}
.btn:hover {
	background-color: #002fed;
}
.btn:active {
	background-color: #2f599e !important;
}
.btn:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}
.btn:disabled {
	background-color: #6c87b5;
	pointer-events: none;
}
CSS

Результат:

4 
<a class="btn" href="##">Link</a>
<button class="btn">Button</button>
<button class="btn" disabled>Disabled</button>
HTML 
const buttons = document.querySelectorAll(".btn");
buttons.forEach((button) => {
	button.onclick = function(e){
		let x = e.clientX - e.target.offsetLeft;
		let y = e.clientY - e.target.offsetTop;
		let ripple = document.createElement("span");
		ripple.style.left = `${x}px`;
		ripple.style.top = `${y}px`;
		this.appendChild(ripple);
		setTimeout(function(){
			ripple.remove();
		}, 600);
	}
});
JS 
.btn {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 15px;
	margin: 0 15px 15px 0;
	outline: none;
	border: none;  
	border-radius: 4px;
	height: 36px;
	line-height: 36px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: #fff;
	background-color: #1a73e8;
	position: relative;
	overflow:hidden;
	vertical-align: top;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation; 
	z-index: 1;
}
.btn span{
	position: absolute;
	background: #fff;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	pointer-events: none;
	animation: btn_ripples 0.6s linear infinite;
}
@keyframes btn_ripples {
	0% {
		width: 0px;
		height: 0px;
		opacity: 0.5;
	}
	100% {
		width: 1000px;
		height: 1000px;
		opacity: 0;
	}
}
.btn:hover {
	box-shadow: 0 1px 2px 0 rgb(26 115 232 / 45%), 0 1px 3px 1px rgb(26 115 232 / 30%);
	background-color: #297be6;
}
.btn:active {
	box-shadow: 0 1px 2px 0 rgb(26 115 232 / 45%), 0 2px 6px 2px rgb(26 115 232 / 30%);
	background-color: #1a73e8 !important;
}
.btn:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}
.btn:disabled {
	pointer-events: none;
	opacity: 0.65;
}
CSS

Результат:

5 
<a class="btn" href="##">Link</a>
<input class="btn" type="button" value="Input">    
<button class="btn">Button</button>
<button class="btn" disabled>Disabled</button>

<a class="btn-2" href="##">Link</a>
<input class="btn-2" type="button" value="Input">    
<button class="btn-2">Button</button>
<button class="btn-2" disabled>Disabled</button>
HTML 
.btn {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 24px;
	margin: 0 15px 15px 0;
	outline: none;
	border: none;    
	border-radius: 3px;
	height: 37px;
	line-height: 37px;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: normal;
	text-decoration: none;
	color: #07bc4c;
	background-color: #fff;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;  
	transition: box-shadow .18s ease-out,background .18s ease-out,color .18s ease-out;
}
.btn:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}
.btn:hover {
	box-shadow: 0 1px 1px 0  #cfcfcf, 0 2px 5px 0  #cfcfcf;
}
.btn:active {
	background-color: #efefef !important;
}
.btn:disabled {
	background-color: #eee;
	color: #444;
	pointer-events: none;
}

.btn-2 {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 24px;
	margin: 0 15px 15px 0;
	outline: none;
	border: none;    
	border-radius: 3px;
	height: 37px;
	line-height: 37px;
	font-size: 14px; 
	text-transform: uppercase;
	font-weight: normal;
	text-decoration: none;
	color: #fff;
	background-color: #05cd51;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
	transition: box-shadow .18s ease-out,background .18s ease-out,color .18s ease-out;
}
.btn-2:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}
.btn-2:hover {
	box-shadow: 0 1px 1px 0  #cfcfcf, 0 2px 5px 0  #cfcfcf;
}
.btn-2:active {
	background-color: #058c38 !important;
}
.btn-2:disabled {
	background-color: #aed2bc;
	color: #444;
	pointer-events: none;
}
CSS

Результат:

6 
<a class="btn" href="##">Link</a>
<input class="btn" type="button" value="Input">    
<button class="btn">Button</button>
<button class="btn" disabled>Disabled</button>
HTML 
.btn {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 20px;
	margin: 0 15px 15px 0;
	outline: none;
	border: none;  
	border-radius: 6px;
	height: 40px;
	line-height: 40px;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	color: #385898;
	background-color: #e7f3ff;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
}
.btn:focus-visible {
	box-shadow: 0 0 0 2px #666;
}
.btn:hover {
	background-color: #DBE7F2;
}
.btn:active {
	transform: scale(0.96);
}
.btn:disabled {
	pointer-events: none;
	opacity: 0.65;
}
CSS

Результат:

7 
<a class="btn" href="##">Link</a>
<input class="btn" type="button" value="Input">    
<button class="btn">Button</button>
<button class="btn" disabled>Disabled</button>

<a class="btn-2" href="##">Link</a>
<input class="btn-2" type="button" value="Input">    
<button class="btn-2">Button</button>
<button class="btn-2" disabled>Disabled</button>
HTML 
.btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 0 16px;
	margin: 0 15px 15px 0;
	outline: none;
	border: none;
	border-radius: 4px;
	height: 30px;
	line-height: 30px;
	font-size: 12.5px;
	font-weight: normal;
	text-decoration: none;
	vertical-align: top;
	color: #55677d;
	background-color: #dfe6ed;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
	overflow: hidden;
}
.btn:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}
.btn:hover {
	opacity: 0.88;
}
.btn:active {
	line-height: 32px;
}
.btn:disabled {
	pointer-events: none;
	opacity: 0.65;
}

.btn-2 {
	display: inline-block;
	box-sizing: border-box;
	padding: 0 16px;
	margin: 0 15px 15px 0;
	outline: none;
	border: none;
	border-radius: 4px;
	height: 30px;
	line-height: 30px;
	font-size: 12.5px;
	font-weight: normal;
	text-decoration: none;
	vertical-align: top;
	color: #fff;
	background-color: #5181b8;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
	overflow: hidden;
}
.btn-2:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}
.btn-2:hover {
	opacity: 0.88;
}
.btn-2:active {
	line-height: 32px;
}
.btn-2:disabled {
	pointer-events: none;
	opacity: 0.65;
}
CSS

Результат:

8 
<a class="btn" href="##">Link</a>
<input class="btn" type="button" value="Input">    
<button class="btn">Button</button>
<button class="btn" disabled>Disabled</button>

<a class="btn-2" href="##">Link</a>
<input class="btn-2" type="button" value="Input">    
<button class="btn-2">Button</button>
<button class="btn-2" disabled>Disabled</button>
HTML 
.btn {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 13px;
	margin: 0 15px 15px 0;
	outline: none;
	border: 1px solid #a4afba;  
	border-radius: 3px;
	height: 32px;
	line-height: 32px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: #838a92;
	background-color: #fff;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;  
}
.btn:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}
.btn:hover {
	border-color: #65a3be;
	color: #4e879c;  
}
.btn:active {
	border-color: #78a2b7 !important;
	color: #3a728b !important;
}
.btn:disabled {
	background-color: #eee;
	color: #444;
	pointer-events: none;
}
	
.btn-2 {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 13px;
	margin: 0 15px 15px 0;
	outline: none;
	border: 1px solid transparent;  
	border-radius: 3px;
	height: 32px;
	line-height: 32px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: #fff;
	background-color: #65a3be;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;  
}
.btn-2:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}
.btn-2:hover {
	border-color: transparent;
	background-color: #4986a1;
	color: #fff;
}
.btn-2:active {
	border-color: #6f9cbc !important;
	background-color: #367089 !important;
}
.btn-2:disabled {
	background-color: #558cb7;
	color: #fff;
	pointer-events: none;
}
CSS

Результат:

9 
<a class="btn" href="##">Link</a>
<input class="btn" type="button" value="Input">    
<button class="btn">Button</button>
<button class="btn" disabled>Disabled</button>

<a class="btn-2" href="##">Link</a>
<input class="btn-2" type="button" value="Input">    
<button class="btn-2">Button</button>
<button class="btn-2" disabled>Disabled</button>
HTML 
.btn {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 15px;
	margin: 0 15px 15px 0;
	outline: none;
	border: 1px solid #6c757d; 
	border-radius: 5px;
	height: 38px;
	line-height: 38px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #6c757d;
	background-color: #fff;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;  
}
.btn:focus {
	box-shadow: 0 0 0 3px rgb(108 117 125 / 50%);
}
.btn:hover {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}
.btn:active {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}
.btn:disabled {
	pointer-events: none;
	opacity: 0.65;
}

.btn-2 {
	display: inline-block;	
	box-sizing: border-box;
	padding: 0 15px;
	margin: 0 15px 15px 0;
	outline: none;
	border: 1px solid #7952b3;  
	border-radius: 5px;
	height: 38px;
	line-height: 38px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background-color: #7952b3;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;  
}
.btn-2:focus {
	box-shadow: 0 0 0 3px rgb(121 82 179 / 25%);
}
.btn-2:hover {
	background-color: #61428f;
	border-color: #61428f;
}
.btn-2:active {
	background-color: #61428f !important;
	border-color: #61428f !important;
}
.btn-2:disabled {
	pointer-events: none;
	opacity: 0.65;
}
CSS

Результат:

10 
<a class="btn" href="##">Link</a>
<button class="btn">Button</button>
<button class="btn" disabled>Disabled</button>
HTML 
body {
	padding: 15px 0;
}
.btn {
	text-decoration: none;
	color: #6b5770;
	background-image: linear-gradient(90deg, #fd7f34, #bd155b);
	display: inline-block;
	padding: 14px 30px;
	border: 1px solid;
	position: relative;
	z-index: 0;
	border-radius: 5px;
	box-sizing: border-box;
	margin: 0 15px 15px 0;
	outline: none;
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;  
}
.btn:before {
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	background: linear-gradient(90deg, #fd7f34, #bd155b);
	z-index: -2;
	transition: .4s;
	border-radius: 5px;
}
.btn:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #fff, #fff);
	z-index: -1;
	transition: .4s;
	border-radius: 4px;
}
.btn:hover {
	color: #fff;
	transition: .3s;
}
.btn:hover:after {
	background: linear-gradient(90deg, #fd7f34, #bd155b);
}
.btn:active:after {
	background: linear-gradient(90deg, #d96d2d, #760f3a);
}
.btn:focus-visible {
	box-shadow: 0 0 0 3px #fd7f34;
}
.btn:disabled {
	pointer-events: none;
}
.btn:disabled:before {
	filter: grayscale(100%);
}
CSS

Результат:

05.02.2021, обновлено 04.04.2022
66795
#CSS #Интерфейсы #Формы
Предыдущая запись Манипуляции с элементами jQuery
Следующая запись CSS-стили для списков dl, dt, dd

Комментарии 1

Генезис Сервис Генезис Сервис
17 сентября 2021 в 02:02
Класс!
Спасибо, админ! ;0)
Ответить

, чтобы добавить комментарий.

Другие публикации

Input type number
Input type number
В HTML5 появилось специальное поле input с атрибутом type=number для вода чисел. Рассмотрим его возможности...
55172
+9
Сборник CSS градиентов
Сборник CSS градиентов
Подборка 23-х фонов с линейным и радиальным градиентом.
77559
+9
Плавное изменение background
Плавное изменение background
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
64778
+4
Contenteditable – текстовый редактор
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43754
+34
Получить координаты курсора
Получить координаты курсора
Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над...
35289
+3
Как изменить Favicon сайта из JavaScript
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
12510
+2