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

Эффекты CSS плавного увеличения кнопки

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

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

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

3 простых hover-эффекта CSS для кнопок

При открытие страницы или по умолчанию:

Расширяющаяся кнопка CSS со значком

Как только навели клик, как появилась кнопка:

Расширяющаяся кнопка на чистом CSS3

Установка:

HTML

Код

<div id="sdemon-padkub">
  <button class="kopad">
  <span class="akulanosu">
  <span class="icon arrow"></span>
  </span>
  <span class="animirovana-knopka">СКАЧАТЬ ФАЙЛ</span>
  </button>
</div>

CSS

Код

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
button.kopad {
  width: 14rem;
  height: auto;
}
button.kopad .akulanosu {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #2a2b44;
  border-radius: 1.625rem;
  text-shadow: 0 1px 0 #131212;
  box-shadow: 0px 0px 10px rgba(136, 133, 133, 0.46), 0px 0px 30px 0px rgba(41, 39, 39, 0.08);
}
button.kopad .akulanosu .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #ececec;
}
button.kopad .akulanosu .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
button.kopad .akulanosu .icon.arrow::before {
  position: absolute;
  content: '';
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #ececec;
  border-right: 0.125rem solid #ececec;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
button.kopad .animirovana-knopka {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
button:hover .akulanosu {
  width: 100%;
}
button:hover .akulanosu .icon.arrow {
  background: #ececec;
  -webkit-transform: translate(1rem, 0);
  transform: translate(1rem, 0);
}
button:hover .animirovana-knopka {
  color: #ececec;
}

@supports (display: grid) {
  body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.625rem;
  grid-template-areas: ". main main ." ". main main .";
  }

  #sdemon-padkub {
  grid-area: main;
  align-self: center;
  justify-self: center;
  }
}

По сути маленькая кнопка закрывает текст при наведении и изображает из себя большую кнопку. Здесь идет чистый CSS для основного создания эффекта, а макет основан на простом HTML. Здесь нет ни JS, ни какой-либо другой библиотеки, где иконка основана на CSS.

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

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

Второй вариант:

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

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

По умолчанию:

Как сделать кнопку с эффектом нажатия с помощью CSS

Как сделать кнопку с эффектом нажатия с помощью CSS

Эффект появление стрелки при наведении:

Потрясающие эффекты для кнопок при нажатии

Кнопка анимации с добавлением стрелки при наведении

Простая 3D-кнопка, анимированная с использованием CSS и HTML-кодирования, идеально подходит для любого типа призывов к действиям или меню на всем сайте, где идет включение в себя редактируемый текстовый раздел.

HTML

Код

<button><span>ZorNet.Ru</span></button>

CSS

Код

button {
  border-radius: 3px;
  background-color: #2f6ca5;
  border: none;
  color: #e8e4e4;
  text-align: center;
  font-size: 28px;
  padding: 16px;
  width: 220px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 28px;
  box-shadow: 0 9px 14px -8px rgba(19, 18, 18, 0.7);
}

button{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 14px;
  right: -20px;
  transition: 0.5s;
}

button:hover{
  padding-right: 24px;
  padding-left:8px;
}

button:hover:after {
  opacity: 1;
  right: 10px;
}

При наведении курсора на текст, текст перемещается влево, оставляя место для значка. Здесь, чтобы показать пример, используется значок стрелки, однако вы можете легко заменить его на любые другие значки по вашему выбору.

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

Прозрачная кнопка

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

С открытием сайта или страницы:

Эффект нажатия кнопки на стилях CSS

Здесь навели курсор:

Кнопки для сайта html и css

HTML

Код

<button>ZORNET.RU</button>

CSS

Код

button {
  transition: all .5s ease;
  color: #fbf7f7;
  border: 3px solid #fdf8f8;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  font-size: 17px;
  background-color: rgba(0, 0, 0, 0);
  padding: 8px;
  cursor: pointer;
  outline: none;
  border-radius: 3px;
}
button:hover {
  color: #06203c;
  background-color: #efebeb;
}

При наведении курсора прозрачность кнопки меняется на непрозрачный уровень, а цвет текста изменяется, чтобы увеличить их видимость.

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

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

Видеоролик по материалу:

04 Декабря 2019 Загрузок: 1 Просмотров: 2487 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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