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

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

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

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

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

На demo страницы можно все варианты рассмотреть и выбрать, тот который понравится.

HTML

Код

<div class="main-container">

  <section>
<button class="kudeg dakuvam-green dakuvam-border-o">Emerald</button><button class="kudeg dakuvam-blue dakuvam-border-o">Peter River</button><button class="kudeg dakuvam-purple dakuvam-border-o">Amethyst</button><button class="kudeg dakuvam-navy dakuvam-border-o">Wet Asphalt</button>
  <button
  class="kudeg dakuvam-orange dakuvam-border-o">Carrot</button><button class="kudeg dakuvam-red dakuvam-border-o">Alizarin</button></section>
  <section>
  <h2>Border</h2><button class="kudeg dakuvam-green dakuvam-border">Emerald</button><button class="kudeg dakuvam-blue dakuvam-border">Peter River</button><button class="kudeg dakuvam-purple dakuvam-border">Amethyst</button><button class="kudeg dakuvam-navy dakuvam-border">Wet Asphalt</button>
  <button
  class="kudeg dakuvam-orange dakuvam-border">Carrot</button><button class="kudeg dakuvam-red dakuvam-border">Alizarin</button></section>
  <section>
  <h2>Border Reversed - Open</h2><button class="kudeg dakuvam-green dakuvam-border-rev-o">Emerald</button><button class="kudeg dakuvam-blue dakuvam-border-rev-o">Peter River</button><button class="kudeg dakuvam-purple dakuvam-border-rev-o">Amethyst</button><button class="kudeg dakuvam-navy dakuvam-border-rev-o">Wet Asphalt</button>
  <button
  class="kudeg dakuvam-orange dakuvam-border-rev-o">Carrot</button><button class="kudeg dakuvam-red dakuvam-border-rev-o">Alizarin</button></section>
  <section>
  <h2>Border Reversed</h2><button class="kudeg dakuvam-green dakuvam-border-rev">Emerald</button><button class="kudeg dakuvam-blue dakuvam-border-rev">Peter River</button><button class="kudeg dakuvam-purple dakuvam-border-rev">Amethyst</button><button class="kudeg dakuvam-navy dakuvam-border-rev">Wet Asphalt</button>
  <button
  class="kudeg dakuvam-orange dakuvam-border-rev">Carrot</button><button class="kudeg dakuvam-red dakuvam-border-rev">Alizarin</button></section>
  <section>
  <h2>Fill Vertical - Open</h2><button class="kudeg dakuvam-green dakuvam-fill-vert-o">Emerald</button><button class="kudeg dakuvam-blue dakuvam-fill-vert-o">Peter River</button><button class="kudeg dakuvam-purple dakuvam-fill-vert-o">Amethyst</button><button class="kudeg dakuvam-navy dakuvam-fill-vert-o">Wet Asphalt</button>
  <button
  class="kudeg dakuvam-orange dakuvam-fill-vert-o">Carrot</button><button class="kudeg dakuvam-red dakuvam-fill-vert-o">Alizarin</button></section>
  <section>
  <h2>Fill Vertical</h2><button class="kudeg dakuvam-green dakuvam-fill-vert">Emerald</button><button class="kudeg dakuvam-blue dakuvam-fill-vert">Peter River</button><button class="kudeg dakuvam-purple dakuvam-fill-vert">Amethyst</button><button class="kudeg dakuvam-navy dakuvam-fill-vert">Wet Asphalt</button>
  <button
  class="kudeg dakuvam-orange dakuvam-fill-vert">Carrot</button><button class="kudeg dakuvam-red dakuvam-fill-vert">Alizarin</button></section>
  <section>
  <h2>Fill Horizontal - Open</h2><button class="kudeg dakuvam-green dakuvam-fill-horz-o">Emerald</button><button class="kudeg dakuvam-blue dakuvam-fill-horz-o">Peter River</button><button class="kudeg dakuvam-purple dakuvam-fill-horz-o">Amethyst</button><button class="kudeg dakuvam-navy dakuvam-fill-horz-o">Wet Asphalt</button>
  <button
  class="kudeg dakuvam-orange dakuvam-fill-horz-o">Carrot</button><button class="kudeg dakuvam-red dakuvam-fill-horz-o">Alizarin</button></section>

CSS

Код

/* Reset */
  .animate, .kudeg, .dakuvam-border-o:before, .dakuvam-border-o:after, .dakuvam-border:before, .dakuvam-border:after, .dakuvam-border-rev-o:before, .dakuvam-border-rev-o:after, .dakuvam-border-rev:before, .dakuvam-border-rev:after, .dakuvam-fill-vert-o:before, .dakuvam-fill-vert-o:after, .dakuvam-fill-vert:before, .dakuvam-fill-vert:after, .dakuvam-fill-horz-o:before, .dakuvam-fill-horz-o:after, .dakuvam-fill-horz:before, .dakuvam-fill-horz:after {
  transition: all 0.3s;
}
/* Main Styles */
  .main-container {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 0 15px;
}
  h1 {
  line-height: 1;
  padding: 25px 0;
  border-bottom: 1px solid #2c3e50;
  font-size: 35px;
  color: #2c3e50;
  text-align: center;
}
  section {
  padding: 60px 0 61px;
  text-align: center;
  position: relative;
}
  section h2 {
  margin-bottom: 15px;
  font-weight: normal;
  font-size: 17px;
  color: #d2d2d2;
  text-align: center;
}
  section:not(:last-child):after {
  content: '';
  width: 70%;
  height: 1px;
  border-bottom: 1px dashed #2c3e50;
  opacity: 0.5;
  position: absolute;
  bottom: -1px;
  left: 15%;
}
  .kudeg {
  display: inline-block;
  line-height: 35px;
  margin: 8px;
  padding: 0 15px;
  font-size: 15px;
  position: relative;
  opacity: 0.999;
  border-radius: 3px;
}
  .dakuvam-border-o {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #b8b8b8;
}
  .dakuvam-border-o:before, .dakuvam-border-o:after {
  content: '';
  border-style: solid;
  position: absolute;
  z-index: 5;
  border-radius: 3px;
  box-sizing: content-box;
}
  .dakuvam-border-o:before {
  width: 0;
  height: 100%;
  border-width: 1px 0 1px 0;
  top: -1px;
  left: 0;
  transition-delay: 0.05s;
}
  .dakuvam-border-o:after {
  width: 100%;
  height: 0;
  border-width: 0 1px 0 1px;
  top: 0;
  left: -1px;
}
  .dakuvam-border-o:hover:before {
  width: 100%;
}
  .dakuvam-border-o:hover:after {
  height: 100%;
}
  .dakuvam-border-o.dakuvam-green:before, .dakuvam-border-o.dakuvam-green:after {
  border-color: #2ecc71;
}
  .dakuvam-border-o.dakuvam-green:hover {
  color: #2ecc71;
}
  .dakuvam-border-o.dakuvam-blue:before, .dakuvam-border-o.dakuvam-blue:after {
  border-color: #3498db;
}
  .dakuvam-border-o.dakuvam-blue:hover {
  color: #3498db;
}
  .dakuvam-border-o.dakuvam-purple:before, .dakuvam-border-o.dakuvam-purple:after {
  border-color: #9b59b6;
}
  .dakuvam-border-o.dakuvam-purple:hover {
  color: #9b59b6;
}
  .dakuvam-border-o.dakuvam-navy:before, .dakuvam-border-o.dakuvam-navy:after {
  border-color: #34495e;
}
  .dakuvam-border-o.dakuvam-navy:hover {
  color: #34495e;
}
  .dakuvam-border-o.dakuvam-orange:before, .dakuvam-border-o.dakuvam-orange:after {
  border-color: #e67e22;
}
  .dakuvam-border-o.dakuvam-orange:hover {
  color: #e67e22;
}
  .dakuvam-border-o.dakuvam-red:before, .dakuvam-border-o.dakuvam-red:after {
  border-color: #e74c3c;
}
  .dakuvam-border-o.dakuvam-red:hover {
  color: #e74c3c;
}
  .dakuvam-border {
  background-color: #e5e5e5;
  border: 1px solid #e5e5e5;
  color: #a6a6a6;
}
  .dakuvam-border:before, .dakuvam-border:after {
  content: '';
  border-style: solid;
  position: absolute;
  z-index: 5;
  border-radius: 3px;
  box-sizing: content-box;
}
  .dakuvam-border:before {
  width: 0;
  height: 100%;
  border-width: 1px 0 1px 0;
  top: -1px;
  left: 0;
  transition-delay: 0.05s;
}
  .dakuvam-border:after {
  width: 100%;
  height: 0;
  border-width: 0 1px 0 1px;
  top: 0;
  left: -1px;
}
  .dakuvam-border:hover {
  background-color: transparent;
}
  .dakuvam-border:hover:before {
  width: 100%;
}
  .dakuvam-border:hover:after {
  height: 100%;
}
  .dakuvam-border.dakuvam-green:before, .dakuvam-border.dakuvam-green:after {
  border-color: #2ecc71;
}
  .dakuvam-border.dakuvam-green:hover {
  color: #2ecc71;
}
  .dakuvam-border.dakuvam-blue:before, .dakuvam-border.dakuvam-blue:after {
  border-color: #3498db;
}
  .dakuvam-border.dakuvam-blue:hover {
  color: #3498db;
}
  .dakuvam-border.dakuvam-purple:before, .dakuvam-border.dakuvam-purple:after {
  border-color: #9b59b6;
}
  .dakuvam-border.dakuvam-purple:hover {
  color: #9b59b6;
}
  .dakuvam-border.dakuvam-navy:before, .dakuvam-border.dakuvam-navy:after {
  border-color: #34495e;
}
  .dakuvam-border.dakuvam-navy:hover {
  color: #34495e;
}
  .dakuvam-border.dakuvam-orange:before, .dakuvam-border.dakuvam-orange:after {
  border-color: #e67e22;
}
  .dakuvam-border.dakuvam-orange:hover {
  color: #e67e22;
}
  .dakuvam-border.dakuvam-red:before, .dakuvam-border.dakuvam-red:after {
  border-color: #e74c3c;
}
  .dakuvam-border.dakuvam-red:hover {
  color: #e74c3c;
}
  .dakuvam-border-rev-o {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #b8b8b8;
}
  .dakuvam-border-rev-o:before, .dakuvam-border-rev-o:after {
  content: '';
  border-style: solid;
  position: absolute;
  z-index: 5;
  border-radius: 3px;
  box-sizing: content-box;
}
  .dakuvam-border-rev-o:before {
  width: 0;
  height: 100%;
  border-width: 1px 0 1px 0;
  top: -1px;
  right: 0;
  transition-delay: 0.05s;
}
  .dakuvam-border-rev-o:after {
  width: 100%;
  height: 0;
  border-width: 0 1px 0 1px;
  bottom: 0;
  left: -1px;
}
  .dakuvam-border-rev-o:hover:before {
  width: 100%;
}
  .dakuvam-border-rev-o:hover:after {
  height: 100%;
}
  .dakuvam-border-rev-o.dakuvam-green:before, .dakuvam-border-rev-o.dakuvam-green:after {
  border-color: #2ecc71;
}
  .dakuvam-border-rev-o.dakuvam-green:hover {
  color: #2ecc71;
}
  .dakuvam-border-rev-o.dakuvam-blue:before, .dakuvam-border-rev-o.dakuvam-blue:after {
  border-color: #3498db;
}
  .dakuvam-border-rev-o.dakuvam-blue:hover {
  color: #3498db;
}
  .dakuvam-border-rev-o.dakuvam-purple:before, .dakuvam-border-rev-o.dakuvam-purple:after {
  border-color: #9b59b6;
}
  .dakuvam-border-rev-o.dakuvam-purple:hover {
  color: #9b59b6;
}
  .dakuvam-border-rev-o.dakuvam-navy:before, .dakuvam-border-rev-o.dakuvam-navy:after {
  border-color: #34495e;
}
  .dakuvam-border-rev-o.dakuvam-navy:hover {
  color: #34495e;
}
  .dakuvam-border-rev-o.dakuvam-orange:before, .dakuvam-border-rev-o.dakuvam-orange:after {
  border-color: #e67e22;
}
  .dakuvam-border-rev-o.dakuvam-orange:hover {
  color: #e67e22;
}
  .dakuvam-border-rev-o.dakuvam-red:before, .dakuvam-border-rev-o.dakuvam-red:after {
  border-color: #e74c3c;
}
  .dakuvam-border-rev-o.dakuvam-red:hover {
  color: #e74c3c;
}
  .dakuvam-border-rev {
  background-color: #e5e5e5;
  border: 1px solid #e5e5e5;
  color: #a6a6a6;
}
  .dakuvam-border-rev:before, .dakuvam-border-rev:after {
  content: '';
  border-style: solid;
  position: absolute;
  z-index: 5;
  border-radius: 3px;
  box-sizing: content-box;
}
  .dakuvam-border-rev:before {
  width: 0;
  height: 100%;
  border-width: 1px 0 1px 0;
  top: -1px;
  right: 0;
}
  .dakuvam-border-rev:after {
  width: 100%;
  height: 0;
  border-width: 0 1px 0 1px;
  bottom: 0;
  left: -1px;
  transition-delay: 0.05s;
}
  .dakuvam-border-rev:hover {
  background-color: transparent;
}
  .dakuvam-border-rev:hover:before {
  width: 100%;
}
  .dakuvam-border-rev:hover:after {
  height: 100%;
}
  .dakuvam-border-rev.dakuvam-green:before, .dakuvam-border-rev.dakuvam-green:after {
  border-color: #2ecc71;
}
  .dakuvam-border-rev.dakuvam-green:hover {
  color: #2ecc71;
}
  .dakuvam-border-rev.dakuvam-blue:before, .dakuvam-border-rev.dakuvam-blue:after {
  border-color: #3498db;
}
  .dakuvam-border-rev.dakuvam-blue:hover {
  color: #3498db;
}
  .dakuvam-border-rev.dakuvam-purple:before, .dakuvam-border-rev.dakuvam-purple:after {
  border-color: #9b59b6;
}
  .dakuvam-border-rev.dakuvam-purple:hover {
  color: #9b59b6;
}
  .dakuvam-border-rev.dakuvam-navy:before, .dakuvam-border-rev.dakuvam-navy:after {
  border-color: #34495e;
}
  .dakuvam-border-rev.dakuvam-navy:hover {
  color: #34495e;
}
  .dakuvam-border-rev.dakuvam-orange:before, .dakuvam-border-rev.dakuvam-orange:after {
  border-color: #e67e22;
}
  .dakuvam-border-rev.dakuvam-orange:hover {
  color: #e67e22;
}
  .dakuvam-border-rev.dakuvam-red:before, .dakuvam-border-rev.dakuvam-red:after {
  border-color: #e74c3c;
}
  .dakuvam-border-rev.dakuvam-red:hover {
  color: #e74c3c;
}
  .dakuvam-fill-vert-o {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #b8b8b8;
  overflow: hidden;
}
  .dakuvam-fill-vert-o:before, .dakuvam-fill-vert-o:after {
  content: '';
  width: 100%;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 0;
  z-index: -1;
}
  .dakuvam-fill-vert-o:before {
  top: 50%;
}
  .dakuvam-fill-vert-o:after {
  bottom: 50%;
}
  .dakuvam-fill-vert-o:hover {
  color: #fff;
}
  .dakuvam-fill-vert-o:hover:before, .dakuvam-fill-vert-o:hover:after {
  height: 50%;
  opacity: 1;
}
  .dakuvam-fill-vert-o.dakuvam-green:before, .dakuvam-fill-vert-o.dakuvam-green:after {
  background-color: #2ecc71;
}
  .dakuvam-fill-vert-o.dakuvam-green:hover {
  border-color: #2ecc71;
}
  .dakuvam-fill-vert-o.dakuvam-blue:before, .dakuvam-fill-vert-o.dakuvam-blue:after {
  background-color: #3498db;
}
  .dakuvam-fill-vert-o.dakuvam-blue:hover {
  border-color: #3498db;
}
  .dakuvam-fill-vert-o.dakuvam-purple:before, .dakuvam-fill-vert-o.dakuvam-purple:after {
  background-color: #9b59b6;
}
  .dakuvam-fill-vert-o.dakuvam-purple:hover {
  border-color: #9b59b6;
}
  .dakuvam-fill-vert-o.dakuvam-navy:before, .dakuvam-fill-vert-o.dakuvam-navy:after {
  background-color: #34495e;
}
  .dakuvam-fill-vert-o.dakuvam-navy:hover {
  border-color: #34495e;
}
  .dakuvam-fill-vert-o.dakuvam-orange:before, .dakuvam-fill-vert-o.dakuvam-orange:after {
  background-color: #e67e22;
}
  .dakuvam-fill-vert-o.dakuvam-orange:hover {
  border-color: #e67e22;
}
  .dakuvam-fill-vert-o.dakuvam-red:before, .dakuvam-fill-vert-o.dakuvam-red:after {
  background-color: #e74c3c;
}
  .dakuvam-fill-vert-o.dakuvam-red:hover {
  border-color: #e74c3c;
}
  .dakuvam-fill-vert {
  background-color: #e5e5e5;
  border: 1px solid #e5e5e5;
  color: #a6a6a6;
  overflow: hidden;
}
  .dakuvam-fill-vert:before, .dakuvam-fill-vert:after {
  content: '';
  width: 100%;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 0;
  z-index: -1;
}
  .dakuvam-fill-vert:before {
  top: 50%;
}
  .dakuvam-fill-vert:after {
  bottom: 50%;
}
  .dakuvam-fill-vert:hover {
  color: #fff;
}
  .dakuvam-fill-vert:hover:before, .dakuvam-fill-vert:hover:after {
  height: 50%;
  opacity: 1;
}
  .dakuvam-fill-vert.dakuvam-green:before, .dakuvam-fill-vert.dakuvam-green:after {
  background-color: #2ecc71;
}
  .dakuvam-fill-vert.dakuvam-green:hover {
  border-color: #2ecc71;
}
  .dakuvam-fill-vert.dakuvam-blue:before, .dakuvam-fill-vert.dakuvam-blue:after {
  background-color: #3498db;
}
  .dakuvam-fill-vert.dakuvam-blue:hover {
  border-color: #3498db;
}
  .dakuvam-fill-vert.dakuvam-purple:before, .dakuvam-fill-vert.dakuvam-purple:after {
  background-color: #9b59b6;
}
  .dakuvam-fill-vert.dakuvam-purple:hover {
  border-color: #9b59b6;
}
  .dakuvam-fill-vert.dakuvam-navy:before, .dakuvam-fill-vert.dakuvam-navy:after {
  background-color: #34495e;
}
  .dakuvam-fill-vert.dakuvam-navy:hover {
  border-color: #34495e;
}
  .dakuvam-fill-vert.dakuvam-orange:before, .dakuvam-fill-vert.dakuvam-orange:after {
  background-color: #e67e22;
}
  .dakuvam-fill-vert.dakuvam-orange:hover {
  border-color: #e67e22;
}
  .dakuvam-fill-vert.dakuvam-red:before, .dakuvam-fill-vert.dakuvam-red:after {
  background-color: #e74c3c;
}
  .dakuvam-fill-vert.dakuvam-red:hover {
  border-color: #e74c3c;
}
  .dakuvam-fill-horz-o {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #b8b8b8;
  overflow: hidden;
}
  .dakuvam-fill-horz-o:before, .dakuvam-fill-horz-o:after {
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}
  .dakuvam-fill-horz-o:before {
  left: 50%;
}
  .dakuvam-fill-horz-o:after {
  right: 50%;
}
  .dakuvam-fill-horz-o:hover {
  color: #fff;
}
  .dakuvam-fill-horz-o:hover:before, .dakuvam-fill-horz-o:hover:after {
  width: 50%;
  opacity: 1;
}
  .dakuvam-fill-horz-o.dakuvam-green:before, .dakuvam-fill-horz-o.dakuvam-green:after {
  background-color: #2ecc71;
}
  .dakuvam-fill-horz-o.dakuvam-green:hover {
  border-color: #2ecc71;
}
  .dakuvam-fill-horz-o.dakuvam-blue:before, .dakuvam-fill-horz-o.dakuvam-blue:after {
  background-color: #3498db;
}
  .dakuvam-fill-horz-o.dakuvam-blue:hover {
  border-color: #3498db;
}
  .dakuvam-fill-horz-o.dakuvam-purple:before, .dakuvam-fill-horz-o.dakuvam-purple:after {
  background-color: #9b59b6;
}
  .dakuvam-fill-horz-o.dakuvam-purple:hover {
  border-color: #9b59b6;
}
  .dakuvam-fill-horz-o.dakuvam-navy:before, .dakuvam-fill-horz-o.dakuvam-navy:after {
  background-color: #34495e;
}
  .dakuvam-fill-horz-o.dakuvam-navy:hover {
  border-color: #34495e;
}
  .dakuvam-fill-horz-o.dakuvam-orange:before, .dakuvam-fill-horz-o.dakuvam-orange:after {
  background-color: #e67e22;
}
  .dakuvam-fill-horz-o.dakuvam-orange:hover {
  border-color: #e67e22;
}
  .dakuvam-fill-horz-o.dakuvam-red:before, .dakuvam-fill-horz-o.dakuvam-red:after {
  background-color: #e74c3c;
}
  .dakuvam-fill-horz-o.dakuvam-red:hover {
  border-color: #e74c3c;
}
  .dakuvam-fill-horz {
  background-color: #e5e5e5;
  border: 1px solid #e5e5e5;
  color: #a6a6a6;
  overflow: hidden;
}
  .dakuvam-fill-horz:before, .dakuvam-fill-horz:after {
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}
  .dakuvam-fill-horz:before {
  left: 50%;
}
  .dakuvam-fill-horz:after {
  right: 50%;
}
  .dakuvam-fill-horz:hover {
  color: #fff;
}
  .dakuvam-fill-horz:hover:before, .dakuvam-fill-horz:hover:after {
  width: 50%;
  opacity: 1;
}
  .dakuvam-fill-horz.dakuvam-green:before, .dakuvam-fill-horz.dakuvam-green:after {
  background-color: #2ecc71;
}
  .dakuvam-fill-horz.dakuvam-green:hover {
  border-color: #2ecc71;
}
  .dakuvam-fill-horz.dakuvam-blue:before, .dakuvam-fill-horz.dakuvam-blue:after {
  background-color: #3498db;
}
  .dakuvam-fill-horz.dakuvam-blue:hover {
  border-color: #3498db;
}
  .dakuvam-fill-horz.dakuvam-purple:before, .dakuvam-fill-horz.dakuvam-purple:after {
  background-color: #9b59b6;
}
  .dakuvam-fill-horz.dakuvam-purple:hover {
  border-color: #9b59b6;
}
  .dakuvam-fill-horz.dakuvam-navy:before, .dakuvam-fill-horz.dakuvam-navy:after {
  background-color: #34495e;
}
  .dakuvam-fill-horz.dakuvam-navy:hover {
  border-color: #34495e;
}
  .dakuvam-fill-horz.dakuvam-orange:before, .dakuvam-fill-horz.dakuvam-orange:after {
  background-color: #e67e22;
}
  .dakuvam-fill-horz.dakuvam-orange:hover {
  border-color: #e67e22;
}
  .dakuvam-fill-horz.dakuvam-red:before, .dakuvam-fill-horz.dakuvam-red:after {
  background-color: #e74c3c;
}
  .dakuvam-fill-horz.dakuvam-red:hover {
  border-color: #e74c3c;
}

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

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

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

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

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

СКАЧАТЬ

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

Kosten

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