Оформление кнопок на CSS

HTML:

<a class="atuin-btn" href="#link">Ссылка</a>
<button class="atuin-btn">Кнопка button</button>
<input class="atuin-btn" type="button" value="Кнопка input" />

<a class="atuin-btn" href="#link">Ссылка</a>

<button class="atuin-btn">Кнопка button</button>

Обратите внимание: тег <input> не имеет псевдоэлементов :before и :after, поэтому внешний вид этих кнопок отличается от <button> и <a>. Эти отличия можно посмотреть в примерах.

Ссылка

.atuin-btn {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	border: 2px solid #BFE2FF;
	position: relative;
	overflow: hidden;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	transition: box-shadow 0.3s, transform 0.3s;
	cursor: pointer;
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	color: #FFF;
}
.atuin-btn:before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(-45deg, transparent, rgba(191, 226, 255, 0.3), transparent);
	transition: left 0.7s;
}
.atuin-btn:hover:before,
.atuin-btn:active:before,
.atuin-btn:focus:before {
	left: 100%;
}

.atuin-btn {

display: inline-flex;

margin: 10px;

text-decoration: none;

border: 2px solid #BFE2FF;

position: relative;

overflow: hidden;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

transition: box-shadow 0.3s, transform 0.3s;

cursor: pointer;

}

.atuin-btn:hover,

.atuin-btn:active,

.atuin-btn:focus {

transform: translateY(-4px);

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

color: #FFF;

}

.atuin-btn:before {

content: "";

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(-45deg, transparent, rgba(191, 226, 255, 0.3), transparent);

transition: left 0.7s;

}

.atuin-btn:hover:before,

.atuin-btn:active:before,

.atuin-btn:focus:before {

left: 100%;

}

Вариант 2:

ПРИМЕР
CSS

Ссылка

.atuin-btn {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer;
	border: 2px solid #BFE2FF;
	outline: 1px solid;
	outline-color: #337AB7;
	outline-offset: 0px;
	text-shadow: none;
	transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);  
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
	box-shadow: inset 0 0 20px #BFE2FF;
	outline-color: rgba(255, 255, 255, 0);
	outline-offset: 15px;
	color: #FFF;
}

.atuin-btn {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

outline: 1px solid;

outline-color: #337AB7;

outline-offset: 0px;

text-shadow: none;

transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);

}

.atuin-btn:hover,

.atuin-btn:active,

.atuin-btn:focus {

box-shadow: inset 0 0 20px #BFE2FF;

outline-color: rgba(255, 255, 255, 0);

outline-offset: 15px;

color: #FFF;

}

Вариант 3:

ПРИМЕР
CSS

Ссылка

.atuin-btn {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer; 
	border: 2px solid #BFE2FF;
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
	color: #FFF;
}
.atuin-btn:after,
.atuin-btn:before {
	position: absolute;
	height: 4px;
	left: 50%;
	background: #337AB7;
	bottom: -6px;
	content: "";
	transition: all 280ms ease-in-out;
	width: 0;
}
.atuin-btn:before {
	top: -6px;
}
.atuin-btn:hover:after,
.atuin-btn:hover:before,
.atuin-btn:active:after,
.atuin-btn:active:before,
.atuin-btn:focus:after,
.atuin-btn:focus:before {
	width: 100%;
	left: 0;
}

.atuin-btn {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

}

.atuin-btn:hover,

.atuin-btn:active,

.atuin-btn:focus {

color: #FFF;

}

.atuin-btn:after,

.atuin-btn:before {

position: absolute;

height: 4px;

left: 50%;

background: #337AB7;

bottom: -6px;

content: "";

transition: all 280ms ease-in-out;

width: 0;

}

.atuin-btn:before {

top: -6px;

}

.atuin-btn:hover:after,

.atuin-btn:hover:before,

.atuin-btn:active:after,

.atuin-btn:active:before,

.atuin-btn:focus:after,

.atuin-btn:focus:before {

width: 100%;

left: 0;

}

Вариант 4:

ПРИМЕР
CSS

Ссылка

.atuin-btn {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer; 
	border: 2px solid #BFE2FF;
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
	color: #FFF;
}
.atuin-btn:before, 
.atuin-btn:after {
	content: "";
	border: 4px solid transparent;
	position: absolute;
	width: 0;
	height: 0;
	box-sizing: content-box;	
}
.atuin-btn:before {
	top: -6px;
	left: -6px;
}
.atuin-btn:after {
	bottom: -6px;
	right: -6px;
}
.atuin-btn:hover:before,
.atuin-btn:active:before,
.atuin-btn:focus:before {
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-top-color: #337AB7;
	border-right-color: #337AB7;
	transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}
.atuin-btn:hover:after,
.atuin-btn:active:after,
.atuin-btn:focus:after {
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-bottom-color: #337AB7;
	border-left-color: #337AB7;
	transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}

.atuin-btn {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

}

.atuin-btn:hover,

.atuin-btn:active,

.atuin-btn:focus {

color: #FFF;

}

.atuin-btn:before,

.atuin-btn:after {

content: "";

border: 4px solid transparent;

position: absolute;

width: 0;

height: 0;

box-sizing: content-box;

}

.atuin-btn:before {

top: -6px;

left: -6px;

}

.atuin-btn:after {

bottom: -6px;

right: -6px;

}

.atuin-btn:hover:before,

.atuin-btn:active:before,

.atuin-btn:focus:before {

width: calc(100% + 4px);

height: calc(100% + 4px);

border-top-color: #337AB7;

border-right-color: #337AB7;

transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;

}

.atuin-btn:hover:after,

.atuin-btn:active:after,

.atuin-btn:focus:after {

width: calc(100% + 4px);

height: calc(100% + 4px);

border-bottom-color: #337AB7;

border-left-color: #337AB7;

transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;

}

Вариант 5:

ПРИМЕР
CSS

Ссылка

.atuin-btn {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer; 
	border: 2px solid #BFE2FF;
	overflow: hidden;
	z-index: 1;
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
	color: #FFF;
}
.atuin-btn:before {
	content: '';
	position: absolute;
	top: 0;
	right: -50px;
	bottom: 0;
	left: 0;
	border-right: 50px solid transparent;
	border-top: 50px solid #2D6B9F;
	transition: transform 0.5s;
	transform: translateX(-100%);
	z-index: -1;
}
.atuin-btn:hover:before,
.atuin-btn:active:before,
.atuin-btn:focus:before {
	transform: translateX(0);
}

.atuin-btn {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

overflow: hidden;

z-index: 1;

}

.atuin-btn:hover,

.atuin-btn:active,

.atuin-btn:focus {

color: #FFF;

}

.atuin-btn:before {

content: '';

position: absolute;

top: 0;

right: -50px;

bottom: 0;

left: 0;

border-right: 50px solid transparent;

border-top: 50px solid #2D6B9F;

transition: transform 0.5s;

transform: translateX(-100%);

z-index: -1;

}

.atuin-btn:hover:before,

.atuin-btn:active:before,

.atuin-btn:focus:before {

transform: translateX(0);

}

Вариант 6:

ПРИМЕР
CSS

Ссылка

.atuin-btn {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer; 
	border: 2px solid #BFE2FF;
	overflow: hidden;
	z-index: 1;
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
	color: #FFF;
}
.atuin-btn:before,
.atuin-btn:after {
	content: '';
	position: absolute;
	top: 50%;
	width: 20px;
	height: 100%;
	background-color: #1C4B73;
	z-index: -1;
}
.atuin-btn:before {
	left: -20px;
	transform: translate(-50%, -50%);
}
.atuin-btn:after {
	right: -20px;
	transform: translate(50%, -50%);
}
.atuin-btn:hover:before,
.atuin-btn:active:before,
.atuin-btn:focus:before {
	animation: from-left 0.5s both;
}
.atuin-btn:hover:after,
.atuin-btn:active:after,
.atuin-btn:focus:after {
	animation: from-right 0.5s both;
}
@keyframes from-right {
	0% {
		right: -20px;
	}
	50% {
		right: 50%;
		width: 20px;
	}
	100% {
		right: 50%;
		width: 100%;
	}
}
@keyframes from-left {
	0% {
		left: -20px;
	}
	50% {
		left: 50%;
		width: 20px;
	}
	100% {
		left: 50%;
		width: 100%;
	}
}

.atuin-btn {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

overflow: hidden;

z-index: 1;

}

.atuin-btn:hover,

.atuin-btn:active,

.atuin-btn:focus {

color: #FFF;

}

.atuin-btn:before,

.atuin-btn:after {

content: '';

position: absolute;

top: 50%;

width: 20px;

height: 100%;

background-color: #1C4B73;

z-index: -1;

}

.atuin-btn:before {

left: -20px;

transform: translate(-50%, -50%);

}

.atuin-btn:after {

right: -20px;

transform: translate(50%, -50%);

}

.atuin-btn:hover:before,

.atuin-btn:active:before,

.atuin-btn:focus:before {

animation: from-left 0.5s both;

}

.atuin-btn:hover:after,

.atuin-btn:active:after,

.atuin-btn:focus:after {

animation: from-right 0.5s both;

}

@keyframes from-right {

0% {

right: -20px;

}

50% {

right: 50%;

width: 20px;

}

100% {

right: 50%;

width: 100%;

}

@keyframes from-left {

0% {

left: -20px;

}

50% {

left: 50%;

width: 20px;

}

100% {

left: 50%;

width: 100%;

}

Вариант 7:

ПРИМЕР
CSS

Ссылка

.atuin-btn {
	display: inline-flex;
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer; 
	border: 2px solid #BFE2FF;
	transition: transform 0.2s ease-out, padding 0.2s ease-out;
	overflow: hidden;
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
	color: #FFF;
	transform: rotate(-2deg);
	padding: 12px 50px 12px 10px;
}
.atuin-btn:before {
	content: "\27A4";
	position: absolute;
	right: -30px;
	color: #1C4B73;  
	transition: right 0.5s cubic-bezier(.97,.01,.97,.55);
}
.atuin-btn:hover:before,
.atuin-btn:active:before,
.atuin-btn:focus:before {
	right: 10px;
}

.atuin-btn {

display: inline-flex;

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

transition: transform 0.2s ease-out, padding 0.2s ease-out;

overflow: hidden;

}

.atuin-btn:hover,

.atuin-btn:active,

.atuin-btn:focus {

color: #FFF;

transform: rotate(-2deg);

padding: 12px 50px 12px 10px;

}

.atuin-btn:before {

content: "\27A4";

position: absolute;

right: -30px;

color: #1C4B73;

transition: right 0.5s cubic-bezier(.97,.01,.97,.55);

}

.atuin-btn:hover:before,

.atuin-btn:active:before,

.atuin-btn:focus:before {

right: 10px;

}

Олег Витальевич: 15.11.2023 в 23:51

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

Ответить
- Alexander: 20.11.2023 в 10:56
  border-top-color: #337AB7; border-right-color: #337AB7; border-bottom-color: #337AB7; border-left-color: #337AB7;
  Ответить
Дмитрий: 28.11.2022 в 21:45

Здравствуйте.
С CSS я на Вы и не соображу как текст "Ссылка" переместить в центр кнопки. Спасибо.

Ответить
- Alexander: 29.11.2022 в 13:57
  
  Она и должна по центру быть
  А если кнопка стоит во всю ширину (display: flex;)
  То чтобы текст был центру, нужно добавить: justify-content: center;
  
  Ответить
Серж: 12.01.2020 в 20:27

На сайте работают, а в мобильной версии нет(((

Ответить
- Alexander: 12.01.2020 в 20:51
  Попробуйте добавить к ховерам актив и фокус, например:
  
  Было:
  
  .atuin-btn:hover:before {...}
  
  Сделать:
  
  .atuin-btn:hover:before, .atuin-btn:active:before, .atuin-btn:focus:before {...}
  
  Завтра обновлю CSS, полезное замечание!
  Ответить
Marss: 19.11.2019 в 16:26

Очень круто)) Спасибо!

Ответить
вася: 27.09.2019 в 00:50

милый человек огромное спасибо

Ответить
Александр: 26.09.2019 в 11:54

А кнопочек в Блоге не хватало :))
Давно ждал.
Спасибо!

Ответить

HTML:

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Вариант 5:

Вариант 6:

Вариант 7:

Смотрите также:

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

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