ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопочная анимация в 6 вариантах на CSS

Кнопочная анимация в 6 вариантах на CSS

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

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

При проверки на адаптивность:

Красивые эффекты CSS для кнопок

Установка:

HTML

Код
<div class="krasivaya_knopka">
  <button class="akuopsun sumena animasug1">
  <span class="kenopecunam">Кнопка #1</span>
  </button>
  <button class="akuopsun sumena animasug2">
  <span class="kenopecunam">Кнопка #2</span>
  </button>
  <button class="akuopsun sumena animasug3">
  <span class="kenopecunam">Кнопка #3</span>
  </button>
  <button class="akuopsun sumena animasug4">
  <span class="kenopecunam">Кнопка #4</span>
  </button>  
  <button class="akuopsun sumena animasug5">
  <span class="kenopecunam">Кнопка #5</span>
  </button>  
  <button class="akuopsun sumena animasug6">
  <span class="kenopecunam">Кнопка #6</span>
  </button>  
</div>

CSS

Код
.akuopsun{
  --uirsumenaBackgroundColor: var(--rsumenaBackgroundColor, transparent);
  --uirsumenaPadding: var(--rsumenaPadding, var(--rsumenaPaddingTop, 0) var(--rsumenaPaddingRight, 0) var(--rsumenaPaddingBottom, 0) var(--rsumenaPaddingLeft, 0));
  --uirsumenaBorderWidth: var(--rsumenaBorderWidth, 0);
  --uirsumenaBorderStyle: var(--rsumenaBorderStyle, solid);
  --uirsumenaBorderColor: var(--rsumenaBorderColor, currentColor);
  --uirsumenaFontFamily: var(--rsumenaFontFamily, inherit);
  --uirsumenaFontSize: var(--rsumenaFontSize, inherit);
  --uirsumenaColor: var(--rsumenaColor);
  background-color: var(--uirsumenaBackgroundColor);
  padding: var(--uirsumenaPadding);
  border-width: var(--uirsumenaBorderWidth);
  border-style: var(--uirsumenaBorderStyle);
  border-color: var(--uirsumenaBorderColor);
  cursor: pointer;
  font-family: var(--uirsumenaFontFamily);
  font-size: var(--uirsumenaFontSize);
}

.akuopsun::-moz-focus-inner,
.akuopsun[type="sumena"]::-moz-focus-inner,
.akuopsun[type="reset"]::-moz-focus-inner,
.akuopsun[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.sumena{
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.sumena::before{
  content: "";
  position: relative;
  z-index: -1;
}

.animasug1::before{
  width: 214%;
  height: 164%;
  opacity: 0;
  position: absolute;
  left: -50%;
  bottom: 0;
  transform-origin: left bottom;
  transform: rotate(-90deg) translateZ(0);
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.01,-.24, 0, .68);
}

.animasug1:hover::before{
  transform: rotate(0deg) translateZ(0);
  opacity: 1;
  transition-duration: .2s;
}

.animasug2::before{
  width: 0;
  height: 0;
  padding: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) scale(0);
  transition: transform .15s ease-out;
}

.animasug2:hover::before{
  transition-duration: .3s;
  transform: translate3d(-50%, -50%, 0) scale(1.5);
}

.animasug3::before{
  width: 110%;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: opacity, height;
  transition-property: opacity, height;
  transition-duration: .25s, .25s;
  transition-delay: .15s, 0s;
  transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24);
}

.animasug3:hover::before{
  opacity: 1;
  height: 110%;
  transition-duration: .25s, .4s;
  transition-delay: 0s;
}

.animasug4::before{
  width: 0;
  height: 110%;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: opacity, width;
  transition-property: opacity, width;
  transition-duration: .25s, .25s;
  transition-delay: .15s, 0s;
  transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24);
}

.animasug4:hover::before{
  opacity: 1;
  width: 110%;
  transition-duration: .25s, .4s;
  transition-delay: 0s;
}

.animasug5::before{
  width: 0;
  height: 110%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  will-change: opacity, width;
  transition-property: opacity, width;
  transition-duration: .25s, .25s;
  transition-delay: .15s, 0s;
  transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24);
}

.animasug5:hover::before{
  opacity: 1;
  width: 110%;
  transition-duration: .25s, .4s;
  transition-delay: 0s;
}

.animasug6::before{
  width: 110%;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  will-change: opacity, height;
  transition-property: opacity, height;
  transition-duration: .25s, .25s;
  transition-delay: .15s, 0s;
  transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24);
}

.animasug6:hover::before{
  opacity: 1;
  height: 110%;
  transition-duration: .25s, .4s;
  transition-delay: 0s;
}

.sumena {
  --rsumenaPadding: 1.6rem 3.2rem;
  --rsumenaBorderWidth: 2px;
  --uisumenaBgColorHover: var(--sumenadBgColorHover);
  text-transform: uppercase;
  color: var(--uisumenaBgColorHover);
  -webkit-transition: color .2s ease-out;
  transition: color .2s ease-out;
}

.sumena::before{
  background-color: var(--uisumenaBgColorHover);
}

.sumena:hover {
  color: #f7f3f3;
}

.sumena {
  --sumenaTextColor: #3068c5;
  --sumenadBgColorHover: #3068c5;
  --sumenaTextColorHover: #fdfcfc;
  --rsumenaBorderColor: #3068c5;
}

.sumena:nth-child(2) {
  --sumenaTextColor: #1c8266;
  --sumenadBgColorHover: #1c8266;
  --rsumenaBorderColor: #1c8266;
}

.sumena:nth-child(3) {
  --sumenaTextColor: #824540;
  --sumenadBgColorHover: #824540;
  --rsumenaBorderColor: #824540;
}

.sumena:nth-child(4) {
  --sumenaTextColor: #980d1e;
  --sumenadBgColorHover: #980d1e;
  --rsumenaBorderColor: #980d1e;
}

.sumena:nth-child(5) {
  --sumenaTextColor: #401c80;
  --sumenadBgColorHover: #401c80;
  --rsumenaBorderColor: #401c80;
}

.sumena:nth-child(6) {
  --sumenaTextColor: #b36812;
  --sumenadBgColorHover: #b36812;
  --rsumenaBorderColor: #b36812;
}

@media (min-width: 768px){

  html{
  font-size: 62.5%;
  }
}

@media (max-width: 767px){

  html{
  font-size: 50%;
  }
}

.krasivaya_knopka{
  max-width: 1400px;  
  display: flex;
  flex-wrap: wrap;  
  margin: auto;  
}

.sumena {
  margin: 20px;
  -webkit-box-flex: 1;
  flex-grow: 1;
  border-radius: 3px;
  box-shadow: 0px 0px 9px 1px rgba(142, 136, 136, 0.69), -1px 1px 4px 10px rgba(76, 76, 76, 0);
}

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

Демонстрация
2020-05-08 Загрузок: 1 Просмотров: 291 Комментарий: (1)

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

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

Оставь свой отзыв

Комментарий: 1
Kosten
Kosten 2020-05-08 15:281
0
Все же немного оформление было добавлено, смотря на стили, то здесь тень прописал box-shadow: где можете сами уже выставить как вам удобнее или убрать за ненадобности. Просто визуально немного меняется стиль кнопок, если вы их ставите на светлый фон сайта.
avatar