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

Кнопки с потрясающими эффектами на CSS

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

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

Так реально выглядит подборка кнопок:

Кнопки с интересным эффектом на чистом CSS

Установка:

HTML

Код

<button class="custom-sakuladem sakuladem-1">Кнопка 1</button>
  <button class="custom-sakuladem sakuladem-2">Кнопка 2</button>
  <button class="custom-sakuladem sakuladem-3"><span>Кнопка 3</span></button>
  <button class="custom-sakuladem sakuladem-4"><span>Кнопка 4</span></button>
  <button class="custom-sakuladem sakuladem-5"><span>Кнопка 5</span></button>
  <button class="custom-sakuladem sakuladem-6"><span>Кнопка 6</span></button>
  <button class="custom-sakuladem sakuladem-7"><span>Кнопка №7</span></button>
  <button class="custom-sakuladem sakuladem-8"><span>Кнопка 8</span></button>
  <button class="custom-sakuladem sakuladem-9">Кнопка 9</button>
  <button class="custom-sakuladem sakuladem-10">Кнопка 10</button>
  <button class="custom-sakuladem sakuladem-11">Кнопка 11</button>
  <button class="custom-sakuladem sakuladem-12"><span>Скрипт</span><span>Кнопка 12</span></button>
  <button class="custom-sakuladem sakuladem-13">Кнопка 13</button>
  <button class="custom-sakuladem sakuladem-14">Кнопка 14</button>
  <button class="custom-sakuladem sakuladem-15">Кнопка 15</button>
  <button class="custom-sakuladem sakuladem-16">Кнопка 16</button>

CSS

Код

button {
  margin: 20px;
}
.custom-sakuladem {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 50px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 16px;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
  inset -7px -7px 10px 0px rgba(0,0,0,.1),7px 7px 20px 0px rgba(0,0,0,.1),
  4px 4px 5px 0px rgba(0,0,0,.1);
  text-shadow: 2px 2px 3px rgba(255,255,255,.5),
  -4px -4px 6px rgba(116, 125, 136, .2);
  outline: none;
}

/* 1 */
.sakuladem-1 {
  color: rgba(0,3,255,.5);
  background-color: #b2d8ff;
  border: none;
}
.sakuladem-1:hover {
  color: rgba(0,3,255, .7);
background: linear-gradient(0deg, rgba(0,3,255,.5) 0%, rgba(2,126,251,.5) 100%);
}

/* 2 */
.sakuladem-2 {
  background-color: #e8d1ff;
  color: rgba(96,9,240, .5);
  border: none;

}
.sakuladem-2:before {
  height: 0%;
  width: 2px;
}
.sakuladem-2:hover {
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
  -4px -4px 6px 0 rgba(116, 125, 136, .5),
  inset -4px -4px 6px 0 rgba(255,255,255,.2),
  inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

/* 3 */
.sakuladem-3 {
  color: rgba(2,126,251,1);
  background: rgba(118,174,241,1);
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;

}
.sakuladem-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.sakuladem-3:before,
.sakuladem-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.sakuladem-3:before {
  height: 0%;
  width: 2px;
}
.sakuladem-3:after {
  width: 0%;
  height: 2px;
}
.sakuladem-3:hover{
  background: transparent;
  box-shadow: none;
}
.sakuladem-3:hover:before {
  height: 100%;
}
.sakuladem-3:hover:after {
  width: 100%;
}
.sakuladem-3 span:hover{
  color: rgba(2,126,251,1);
}
.sakuladem-3 span:before,
.sakuladem-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.sakuladem-3 span:before {
  width: 2px;
  height: 0%;
}
.sakuladem-3 span:after {
  width: 0%;
  height: 2px;
}
.sakuladem-3 span:hover:before {
  height: 100%;
}
.sakuladem-3 span:hover:after {
  width: 100%;
}

/* 4 */
.sakuladem-4 {
  color: #03c8a8;
background: #96e4df;
  line-height: 42px;
  padding: 0;
  border: none;
}
.sakuladem-4:hover{
  background-color: #89d8d3;

}

/* 5 */
.sakuladem-5 {
  border: none;
  color: #ff84c1;
  background-color: #ffc1e0;
}
.sakuladem-5:hover {
  color: #f0094a;
  background: transparent;
  box-shadow:none;
}
.sakuladem-5:before,
.sakuladem-5:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #f0094a;
  box-shadow:
  -1px -1px 5px 0px #fff,
  7px 7px 20px 0px #0003,
  4px 4px 5px 0px #0002;
  transition:400ms ease all;
}
.sakuladem-5:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.sakuladem-5:hover:before,
.sakuladem-5:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* 6 */
.sakuladem-6 {
  color: rgba(234,76,137,1);
  background: rgb(247,150,192);
  line-height: 42px;
  padding: 0;
  border: none;
}
.sakuladem-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.sakuladem-6:before,
.sakuladem-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 1px;
  box-shadow:
  -1px -1px 20px 0px rgba(255,255,255,1),
  -4px -4px 5px 0px rgba(255,255,255,1),
  7px 7px 20px 0px rgba(0,0,0,.4),
  4px 4px 5px 0px rgba(0,0,0,.3);
}
.sakuladem-6:before {
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.sakuladem-6:after {
  left: 0;
  bottom: 0;
  transition: all 500ms ease;
}
.sakuladem-6:hover{
  background: transparent;
  color: #76aef1;
  box-shadow: none;
}
.sakuladem-6:hover:before {
  transition: all 500ms ease;
  height: 100%;
}
.sakuladem-6:hover:after {
  transition: all 500ms ease;
  height: 100%;
}
.sakuladem-6 span:before,
.sakuladem-6 span:after {
  position: absolute;
  content: "";
  box-shadow:
  -1px -1px 20px 0px rgba(255,255,255,1),
  -4px -4px 5px 0px rgba(255,255,255,1),
  7px 7px 20px 0px rgba(0,0,0,.4),
  4px 4px 5px 0px rgba(0,0,0,.3);
}
.sakuladem-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: .5px;
  transition: all 500ms ease;
}
.sakuladem-6 span:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: .5px;
  transition: all 500ms ease;
}
.sakuladem-6 span:hover:before {
  width: 100%;
}
.sakuladem-6 span:hover:after {
  width: 100%;
}

/* 7 */
.sakuladem-7 {
background: #ffbf7f;
  line-height: 42px;
  color: darkorange;
  padding: 0;
  border: none;
}
.sakuladem-7 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.sakuladem-7:before,
.sakuladem-7:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: rgba(251,75,2,1);
  box-shadow:
  -7px -7px 20px 0px rgba(255,255,255,.9),
  -4px -4px 5px 0px rgba(255,255,255,.9),
  7px 7px 20px 0px rgba(0,0,0,.2),
  4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.sakuladem-7:before{
  height: 0%;
  width: 2px;
}
.sakuladem-7:after {
  width: 0%;
  height: 2px;
}
.sakuladem-7:hover{
  color: rgba(251,75,2,1);
  background: transparent;
}
.sakuladem-7:hover:before {
  height: 100%;
}
.sakuladem-7:hover:after {
  width: 100%;
}
.sakuladem-7 span:before,
.sakuladem-7 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(251,75,2,1);
  box-shadow:
  -7px -7px 20px 0px rgba(255,255,255,.9),
  -4px -4px 5px 0px rgba(255,255,255,.9),
  7px 7px 20px 0px rgba(0,0,0,.2),
  4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.sakuladem-7 span:before {
  width: 2px;
  height: 0%;
}
.sakuladem-7 span:after {
  height: 2px;
  width: 0%;
}
.sakuladem-7 span:hover:before {
  height: 100%;
}
.sakuladem-7 span:hover:after {
  width: 100%;
}

/* 8 */
.sakuladem-8 {
  background-color: #d9d0f5;
  color: #c797eb;
  line-height: 42px;
  padding: 0;
  border: none;
}
.sakuladem-8 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.sakuladem-8:before,
.sakuladem-8:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #c797eb;
  transition: all 0.3s ease;
}
.sakuladem-8:before{
  height: 0%;
  width: 2px;
}
.sakuladem-8:after {
  width: 0%;
  height: 2px;
}
.sakuladem-8:hover:before {
  height: 100%;
}
.sakuladem-8:hover:after {
  width: 100%;
}
.sakuladem-8:hover{
  background: transparent;
}
.sakuladem-8 span:hover{
  color: #c797eb;
}
.sakuladem-8 span:before,
.sakuladem-8 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #c797eb;
  transition: all 0.3s ease;
}
.sakuladem-8 span:before {
  width: 2px;
  height: 0%;
}
.sakuladem-8 span:after {
  height: 2px;
  width: 0%;
}
.sakuladem-8 span:hover:before {
  height: 100%;
}
.sakuladem-8 span:hover:after {
  width: 100%;
}


/* 9 */
.sakuladem-9 {
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
  color: #1fd1f9;
  color: #0cbcff;
}
.sakuladem-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #5fe0fd;
  transition: all 0.3s ease;
}
.sakuladem-9:hover {
  background: transparent;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
  -4px -4px 6px 0 rgba(116, 125, 136, .2),
  inset -4px -4px 6px 0 rgba(255,255,255,.5),
  inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  color: #fff;
}
.sakuladem-9:hover:after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
  -4px -4px 6px 0 rgba(116, 125, 136, .2),
  inset -4px -4px 6px 0 rgba(255,255,255,.5),
  inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

/* 10 */
.sakuladem-10 {
  background: lightblue;
  color: #60abf7;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.sakuladem-10:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  -webkit-transform: scale(.1);
  transform: scale(.1);
}
.sakuladem-10:hover {
  color: #fff;
  border: none;
  background: transparent;
}
.sakuladem-10:hover:after {
  background: #7fbfff;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 11 */
.sakuladem-11 {
  border: none;
  background: rgb(251,33,117);
  background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
  background: #f7d0f5;
  color: rgba(251,33,117,.5);
  overflow: hidden;
}
.sakuladem-11:hover {
  text-decoration: none;
  color: #fff;
}
.sakuladem-11:before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-sakuladem1 3s ease-in-out infinite;
}
.sakuladem-11:hover{
  opacity: .7;
}
.sakuladem-11:active{
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.3),
  -4px -4px 6px 0 rgba(116, 125, 136, .2),
  inset -4px -4px 6px 0 rgba(255,255,255,.2),
  inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

@-webkit-keyframes shiny-sakuladem1 {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 12 */
.sakuladem-12{
  position: relative;
  right: 20px;
  bottom: 20px;
  border:none;
  box-shadow: none;
  width: 130px;
  height: 40px;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.sakuladem-12 span {
  background: #7fbfff;
  color: #3b97f3;
  display: block;
  position: absolute;
  width: 130px;
  height: 40px;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
  7px 7px 20px 0px rgba(0,0,0,.1),
  4px 4px 5px 0px rgba(0,0,0,.1);
  border-radius: 50px;
  margin:0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.sakuladem-12 span:nth-child(1) {
  box-shadow:
  -7px -7px 20px 0px #fff9,
  -4px -4px 5px 0px #fff9,
  7px 7px 20px 0px #0002,
  4px 4px 5px 0px #0001;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.sakuladem-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.sakuladem-12:hover span:nth-child(1) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
  7px 7px 20px 0px rgba(0,0,0,.1),
  4px 4px 5px 0px rgba(0,0,0,.1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.sakuladem-12:hover span:nth-child(2) {
  background: transparent;
  color: transparent;
  box-shadow: none;
  text-shadow: none;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

/* 13 */
.sakuladem-13 {
  color: lightseagreen;
  background-color: #89d8d3;
  border: none;
  z-index: 1;
}
.sakuladem-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 50px;
  background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
  inset -7px -7px 10px 0px rgba(0,0,0,.1),
  7px 7px 20px 0px rgba(0,0,0,.1),
  4px 4px 5px 0px rgba(0,0,0,.1);
  text-shadow: 0px 0px 6px rgba(255,255,255,.3),
  -4px -4px 6px rgba(116, 125, 136, .2);
  transition: all 0.3s ease;
}
.sakuladem-13:hover {

}
.sakuladem-13:hover:after {
  top: 0;
  height: 100%;
}
.sakuladem-13:active {
  top: 2px;
}

/* 14 */
.sakuladem-14 {
  background: #ffff9e;
  color: #ffb64d;
  border: none;
  z-index: 1;
}
.sakuladem-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 50px;
  background-color: #ffff8a;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
  inset -7px -7px 10px 0px rgba(0,0,0,.1),
  7px 7px 20px 0px rgba(0,0,0,.1),
  4px 4px 5px 0px rgba(0,0,0,.1);
  text-shadow: 0px 0px 6px rgba(255,255,255,.3),
  -4px -4px 6px rgba(116, 125, 136, .2);
  transition: all 0.3s ease;
}
.sakuladem-14:hover {
  color: #ffb64d;
}
.sakuladem-14:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.sakuladem-14:active {
  top: 2px;
}

/* 15 */
.sakuladem-15 {
  background: #c68eff;
  color: #a453f5;
  border: none;
  z-index: 1;
}
.sakuladem-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background-color: #7f7fff;
  border-radius: 50px;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
  7px 7px 20px 0px rgba(0,0,0,.1),
  4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.sakuladem-15:hover {
  color: #4c4cf1;
}
.sakuladem-15:hover:after {
  left: 0;
  width: 100%;
}
.sakuladem-15:active {
  top: 2px;
}

/* 16 */
.sakuladem-16 {
  border: none;
  color: #aaa;
}
.sakuladem-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  border-radius: 50px;
  box-shadow:
  -7px -7px 20px 0px #fff9,
  -4px -4px 5px 0px #fff9,
  7px 7px 20px 0px #0002,
  4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.sakuladem-16:hover {
  color: #bbb;
}
.sakuladem-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.sakuladem-16:active {
  top: 2px;
}

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

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

13 Сентября 2020 Загрузок: 2 Просмотров: 1103 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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