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

Анимированные 2 кнопки с эффектами CSS3

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

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

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

Вы также можете посмотреть на demo страницы или на снимках, что были сняты с площадки, где проходила проверка.

Это по умолчанию или при открытии сайта.

Кнопка для сайта с эффектами

Здесь навели курсор и видим как правая часть выезжает.

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

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

Светлая кнопка со стрелкой для сайта

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

Первая кнопка:

Анимация с помощью чистого CSS для кнопок

HTML

Код

<div class="sedakosema-kuvagen" id="sedakosema-kuvagen">
  <div class="detunipog">
  <a href="#" class="nedosema-gavamecal-penius-1">
  <span class="musakes"></span>
  <span class="kupesanisab">Zornet.Ru</span>
  <span class="musakes2"></span>

CSS

Код

.detunipog {
  overflow:hidden;
}
.nedosema-gavamecal-penius-1 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0px 0px 7px rgba(16, 16, 16, 0.4) inset, 0px 0px 0px 4px rgba(245, 240, 240, 0.1);
  -webkit-box-shadow: 0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(239, 239, 239, 0.1);
  background-color: #ecedf5;
  display: block;
  float: left;
  margin: 10px;
  overflow: hidden;
  padding: 10px 15px;
  position: relative;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}
.nedosema-gavamecal-penius-1 .musakes {
  background: rgba(0, 0, 0, 0) url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/download.png) no-repeat top left;
  float: left;
  height: 33px;
  width: 47px;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}
.nedosema-gavamecal-penius-1 .kupesanisab {
  font-size: 18px;
  color: #424242;
  display: block;
  float: left;
  font-weight: bold;
  line-height: 32px;
}
.nedosema-gavamecal-penius-1 .musakes2{
  background:transparent url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/download2.png) no-repeat top left;
  height:32px;
  left:20px;
  opacity:0;
  position:absolute;
  top:-15px;
  width:32px;
}
.nedosema-gavamecal-penius-1:hover {
  background-color: #ddddf7;
  box-shadow: 0px 0px 4px rgba(23, 22, 22, 0.5) inset, 0px 0px 0px 4px rgba(52, 78, 189, 0.5);
  -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
  -webkit-box-shadow: 0px 0px 4px rgba(19, 18, 18, 0.5) inset, 0px 0px 0px 4px rgba(49, 69, 193, 0.5);
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.nedosema-gavamecal-penius-1:hover .musakes{
  transform:rotate(-90deg) scale(0.8);
  -ms-transform:rotate(-90deg) scale(0.8);
  -moz-transform:rotate(-90deg) scale(0.8);
  -o-transform:rotate(-90deg) scale(0.8);
  -webkit-transform:rotate(-90deg) scale(0.8);
}
.nedosema-gavamecal-penius-1:active .musakes{
  opacity:0;
}
.nedosema-gavamecal-penius-1:active .musakes2{
  opacity:1;
  -webkit-animation:slideDown1 1.0s linear infinite;
  -moz-animation:slideDown1 1.0s linear infinite;
  animation:slideDown1 1.0s linear infinite;
}
.nedosema-gavamecal-penius-1:active{
  background-color:#c1c1ff;
  box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8);
  -moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8);
  -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8);
}
@keyframes slideDown1{
  0% {
  top: -30px;
  }
  100% {
  top: 55px;
  }
}
@-webkit-keyframes slideDown1{
  0% {
  top: -30px;
  }
  100% {
  top: 55px;
  }
}
@-moz-keyframes slideDown1{
  0% {
  top: -30px;
  }
  100% {
  top: 55px;
  }
}

Вторая кнопка:

Кнопка с красивой анимацией

HTML

Код

<div style="clear:both"></div>
  <a href="#" class="visualin-gomplen-kation-2">
  <span class="kupesanisab">Zornet.Ru</span>
  <span class="sabpdateg"><span>Вебмастеру</span></span>
  <span class="musakes"></span>
  </a>

  </div>
  </div>

CSS

Код

/*buttons #2*/
.visualin-gomplen-kation-2 {
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 7px;
  background-color: #aaccec;
  float: left;
  height: 38px;
  margin: 8px;
  overflow: hidden;
  padding-left: 15px;
  position: relative;
  text-decoration: none;
  transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  border: 2px solid #a5a5a5;
}
.visualin-gomplen-kation-2 .kupesanisab {
  color: #252424;
  text-shadow: 0 1px 0 #f9f9f9;
  display: block;
  float: left;
  font-size: 18px;
  font-weight: bold;
  line-height: 38px;
  transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}
.visualin-gomplen-kation-2 .sabpdateg{
  background-color:#63707e;
  color:#fff;
  float:left;
  font-size:18px;
  line-height:40px;
  opacity:0;
  position:relative;
  text-transform:uppercase;
  width:0px;
  transition:all 0.3s linear;
  -moz-transition:all 0.3s linear;
  -o-transition:all 0.3s linear;
  -webkit-transition:all 0.3s linear;
}
.visualin-gomplen-kation-2 .sabpdateg span, .visualin-gomplen-kation-2 .sabpdateg input {
  display:none;
}
.visualin-gomplen-kation-2 .musakes{
  background:transparent url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/right.png) no-repeat center center;
  float:left;
  height:40px;
  width:40px;
  transition:all 0.3s linear;
  -moz-transition:all 0.3s linear;
  -o-transition:all 0.3s linear;
  -webkit-transition:all 0.3s linear;
}
.visualin-gomplen-kation-2:hover .sabpdateg span, .visualin-gomplen-kation-2:hover .sabpdateg input{
  display:inline-block;
}
.visualin-gomplen-kation-2:hover .sabpdateg{
  margin-left:10px;
  opacity: 1;
  padding-left:10px;
  padding-right:10px;
  text-align:center;
  width:150px;
}
.visualin-gomplen-kation-2:hover .musakes{
  transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
}

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

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

Хотя как уже сказано, все можно выстроить как вам нужно, это сделать яркой или поставить палитру цвета под стилистику сайта.

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

Демонстрация на обе версий кнопки

02 Апреля 2019 Загрузок: 1 Просмотров: 1301 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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