ZorNet.Ru — сайт для вебмастера » HTML и CSS » Современные кнопки с эффектом на чистом CSS

Современные кнопки с эффектом на чистом CSS

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

Если вы не подобрали кнопку, которая полностью создана на CSS, где имеет отличный эффект, то в этой подборке можете найти оригинальную кнопку по анимации. Если вы ищете некоторые классные кнопки CSS, а затем просмотрите удивительную коллекцию ниже, где представлена отличная подборка кнопок HTML, CSS и JavaScript. Некоторые кнопки лучше всего просматриваются в Google Chrome.

Кнопка является существенным элементом любого дизайна. Они предназначены для того, чтобы выглядеть и вести себя как интерактивный элемент вашей страницы. Благодаря минимальному стилю, хотя у каждого элемента кнопки будет свой индивидуальный почерк. То легко скомпилировать общую кнопку и создать индивидуальные кнопки для вашего собственного приложения.

Приступаем к установке:

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

Кнопка с эффектом при помощи CSS

HTML

Код

<a href="http://zornet.ru">Button</a>

CSS

Код

a {
  text-decoration: none;
  outline: none;
  display: inline-block;
  padding: 9px 29px;
  margin: 9px 19px;
  position: relative;
  overflow: hidden;
  border: 1.5px solid #ffffff;
  background: #5737fe;
  color: #f9f8f8;
  border-radius: 5px;
  transition: .2s ease-in-out;
  box-shadow: 0px 4px 10px rgba(60, 57, 57, 0.28), 0px 10px 30px -15px rgba(138, 135, 135, 0);
}

a:before {
  content: "";
  background: linear-gradient(90deg, rgba(249, 246, 246, 0.03), rgba(255,255,255,.5));
  height: 49px;
  width: 49px;
  position: absolute;
  top: -7px;
  transform: skewX(-45deg);
  animation: shine 1s linear infinite;
}
@keyframes shine {
  from {left: -75px;}
  to {left: 150px;}
}

Красивый блеск, безусловно привлекает внимание.

Демонстрация

2. Второй вариант с оригинальным эффектом, что сразу идет несколько на выбор.

Кнопки с анимацией для сайта на стилях CSS

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

HTML

Код

<div class="subsacripon comapelulinag-top">ZorNe.Ru Top</div>
<div class="subsacripon comapelulinag-left">ZorNe.Ru Left</div>
<div class="subsacripon comapelulinag-right">ZorNe.Ru Right</div>
<div class="subsacripon comapelulinag-middle">ZorNe.Ru Middle</div>
<div class="subsacripon comapelulinag-bottom">ZorNe.Ru Bottom</div>

CSS

Код

.subsacripon {
  position: relative;
  padding: 1.5rem 3.9rem;
  padding-right: 2.8rem;
  font-size: 1.5rem;
  color: #fbf9f9;
  letter-spacing: 1.1rem;
  text-transform: uppercase;
  transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
  cursor: pointer;
  user-select: none;
  text-shadow: 0 1px 0 #949292;
}

.subsacripon:before, .subsacripon:after {
  content: '';
  position: absolute;
  transition: inherit;
  z-index: -1;
}

.subsacripon:hover {
  color: var(--def);
  transition-delay: .6s;
}

.subsacripon:hover:before {
  transition-delay: 0s;
}

.subsacripon:hover:after {
  background: var(--inv);
  transition-delay: .4s;
}

/* comapelulinag Top */

.comapelulinag-top:before,
.comapelulinag-top:after {
  left: 0;
  height: 0;
  width: 100%;
}

.comapelulinag-top:before {
  bottom: 0;
  border: 1px solid var(--inv);
  border-top: 0;
  border-bottom: 0;
}

.comapelulinag-top:after {
  top: 0;
  height: 0;
}

.comapelulinag-top:hover:before,
.comapelulinag-top:hover:after {
  height: 100%;
}

/* comapelulinag Left */

.comapelulinag-left:before,
.comapelulinag-left:after {
  top: 0;
  width: 0;
  height: 100%;
}

.comapelulinag-left:before {
  right: 0;
  border: 1px solid var(--inv);
  border-left: 0;
  border-right: 0;
}

.comapelulinag-left:after {
  left: 0;
}

.comapelulinag-left:hover:before,
.comapelulinag-left:hover:after {
  width: 100%;
}

/* comapelulinag Right */

.comapelulinag-right:before,
.comapelulinag-right:after {
  top: 0;
  width: 0;
  height: 100%;
}

.comapelulinag-right:before {
  left: 0;
  border: 1px solid var(--inv);
  border-left: 0;
  border-right: 0;
}

.comapelulinag-right:after {
  right: 0;
}

.comapelulinag-right:hover:before,
.comapelulinag-right:hover:after {
  width: 100%;
}

/* comapelulinag Middle */

.comapelulinag-middle:before {
  top: 0;
  left: 50%;
  height: 100%;
  width: 0;
  border: 1px solid var(--inv);
  border-left: 0;
  border-right: 0;
}

.comapelulinag-middle:after {
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: var(--inv);
}

.comapelulinag-middle:hover:before {
  left: 0;
  width: 100%;
}

.comapelulinag-middle:hover:after {
  top: 0;
  height: 100%;
}

/* comapelulinag Bottom */

.comapelulinag-bottom:before,
.comapelulinag-bottom:after {
  left: 0;
  height: 0;
  width: 100%;
}

.comapelulinag-bottom:before {
  top: 0;
  border: 1px solid var(--inv);
  border-top: 0;
  border-bottom: 0;
}

.comapelulinag-bottom:after {
  bottom: 0;
  height: 0;
}

.comapelulinag-bottom:hover:before,
.comapelulinag-bottom:hover:after {
  height: 100%;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  --def: #d6d9da;
  --inv: #222b44;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(-25deg, #06526b 0%, #215c70 100%);
}

html {
  font-size: 14px;
  font-family: 'Playfair Display', serif;
}

div {margin-bottom: 4rem;}
div:last-child {margin-bottom: 0;}

Здесь выбираем один вариант, возможно можете сразу несколько на портал выставить, так как классы у них разные и конфликтовать не должны.

Демонстрация

3. Третий вариант кнопки, что создана на чистых стилях CSS.

1.Так цветовая гамма идет по умолчанию:

Кнопка CSS3

2. Здесь навели курсор, где появилась анимация:

Копки для сайта на стилях CSS

HTML

Код

<a href="http://zornet.ru">ZORNET.RU</a>

CSS

Код

a {
  text-decoration: none;
  outline: none;
  display: inline-block;
  width: 153px;
  height: 50px;
  line-height: 50px;
  border-radius: 50px;
  margin: 9px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 600;
  color: #f5f3f3;
  background: #6e9cf3;
  box-shadow: 0 8px 17px rgba(14, 14, 14, 0.22);
  transition: .3s;
  border: 2px solid #f9f6f6;
}
a:hover {
  background: #22d68f;
  box-shadow: 0 15px 20px rgba(57, 214, 152, 0.48);
  color: white;
  transform: translateY(-7px);
}

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

Только в этом случай, здесь добавлен обвод на 2 пикселя, и синего оттенка немного добавлено, что при наведение она немного поднимается вверх и приумножаются тени, что красиво смотрится.

Демонстрация

20 Июля 2018 Просмотров: 1524 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

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