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

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

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

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

Кнопки, это совершенно удобные инструменты, когда вам нужны более традиционные действия. Для этого у Фонда есть много простых в использовании стилей кнопок, которые вы можете настроить или переопределить в соответствии с вашими потребностями. Чтобы настроить стили кнопок, вы должны сгруппировать свой собственный CSS в класс, затем можно добавить к элементу, который уже имеет имя класса. Вот несколько примеров. Ниже приведен снимок демонстрационных элементов кнопки.

Кнопка CSS с графическим эффектом в 3D

1.

HTML

Код

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

CSS

Код

a.ransition_efects {
  background: #2989bf;
  border-radius: 3px;
  box-shadow: 0 -3px 0 0 hsla(0, 2%, 11%, 0.24) inset;
  color: #f3f1f1;
  display: table;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
  padding: 9px 30px;
  margin: 0 auto;
  text-decoration: none;
  transition: all 0.3s;
}
a.ransition_efects:hover {
  background: #2cb50c;/*другой цвет фона*/
  box-shadow: 0 3px 0 0 hsla(0, 3%, 15%, 0.2) inset;
}

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

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

1.

HTML

Код

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

CSS

Код

button {
  background: #1a96ab;
  color: #f7f6f6;
  border: none;
  position: relative;
  height: 57px;
  font-size: 1.7em;
  padding: 0 1.5em;
  cursor: pointer;
  transition: 800ms ease all;
  outline: none;
}
button:hover {
  background: #f5f3f3;
  color: #1a7bab;
}
button:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1a7bab;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}

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

Оригинальная кнопка с эффектом открывание

1.

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

HTML

Код

<div class="button">
  <p class="datext-atribute">ГОТОВ?</p>
  <div class="kosuplicate-domouse">
  <p class="transitions-andatutran">GO!</p>
  </div>
  </div>

<div class="button">
  <p class="datext-atribute">ЗАКРЫТЬ</p>
  <div class="kosuplicate-domouse">
  <p class="transitions-andatutran">X</p>
  </div>
  </div>

CSS

Код

.button {
  background: #3D4C53;
  margin : 15px auto;
  width : 200px;
  height : 49px;
  overflow: hidden;
  text-align : center;
  transition : .2s;
  cursor : pointer;
  border-radius: 5px;
  box-shadow: 0px 1px 2px rgba(25, 24, 24, 0.24);
}
.kosuplicate-domouse {
  position : relative;
  width : 195px;
  height : 97px;
  margin-top: -100px;
  padding-top: 3px;
  background : #26A69A;
  left : -249px;
  transition : .3s;
}
.datext-atribute {
  color : white;
  transition : .3s;
}
.transitions-andatutran {
  margin-top : 63px;
  margin-right : -130px;
  color : #f3f3f3;
}
.button:hover .kosuplicate-domouse{
  left: -130px;
}
.button:hover .datext-atribute{
  margin-left : 70px;
}
.button:active {
  box-shadow: 0px 4px 5px rgba(25, 24, 24, 0.34);
}

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

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

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

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

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

Kosten

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