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

16 кнопок с эффектом CSS при наведении

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

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

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

Так выглядят кнопки при установки:

Установка:

HTML

Код

<div class="organization">
  <button class="kunopaceka samules-1">Кнопка #1</button>
  <button class="kunopaceka samules-2">Кнопка #2</button>
  <button class="kunopaceka samules-3"><span>Кнопка #3</span></button>
  <button class="kunopaceka samules-4"><span>Кнопка #4</span></button>
  <button class="kunopaceka samules-5"><span>Кнопка #5</span></button>
  <button class="kunopaceka samules-6"><span>Кнопка #6</span></button>
  <button class="kunopaceka samules-7"><span>Кнопка #7</span></button>
  <button class="kunopaceka samules-8"><span>Кнопка #8</span></button>
  <button class="kunopaceka samules-9">Кнопка #9</button>
  <button class="kunopaceka samules-10">Кнопка #10</button>
  <button class="kunopaceka samules-11">Кнопка #11<div class="dot"></div></button>
  <button class="kunopaceka samules-12"><span>Click!</span><span>Кнопка #12</span></button>
  <button class="kunopaceka samules-13">Кнопка #13</button>
  <button class="kunopaceka samules-14">Кнопка #14</button>
  <button class="kunopaceka samules-15">Кнопка #15</button>
  <button class="kunopaceka samules-16">Кнопка #16</button>
</div>

CSS

Код

.organization {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.kunopaceka {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  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),
  7px 7px 20px 0px rgba(0,0,0,.1),
  4px 4px 5px 0px rgba(0,0,0,.1);
}

/* 1 */
.samules-1 {
  background: rgb(6,14,131);
  background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
  border: none;
}
.samules-1:hover {
  background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
}

/* 2 */
.samules-2 {
  background: rgb(96,9,240);
  background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
  border: none;

}
.samules-2:before {
  height: 0%;
  width: 2px;
}
.samules-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, .4);
}

/* 3 */
.samules-3 {
  background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;

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

/* 4 */
.samules-4 {
  background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.samules-4:hover{
  background-color: #89d8d3;
background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
}
.samules-4 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.samules-4:before,
.samules-4:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9),
  -4px -4px 6px 0 rgba(116, 125, 136, .2),
  inset -4px -4px 6px 0 rgba(255,255,255,.9),
  inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  transition: all 0.3s ease;
}
.samules-4:before {
  height: 0%;
  width: .1px;
}
.samules-4:after {
  width: 0%;
  height: .1px;
}
.samules-4:hover:before {
  height: 100%;
}
.samules-4:hover:after {
  width: 100%;
}
.samules-4 span:before,
.samules-4 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9),
  -4px -4px 6px 0 rgba(116, 125, 136, .2),
  inset -4px -4px 6px 0 rgba(255,255,255,.9),
  inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  transition: all 0.3s ease;
}
.samules-4 span:before {
  width: .1px;
  height: 0%;
}
.samules-4 span:after {
  width: 0%;
  height: .1px;
}
.samules-4 span:hover:before {
  height: 100%;
}
.samules-4 span:hover:after {
  width: 100%;
}

/* 5 */
.samules-5 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
  background: rgb(255,27,0);
background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
}
.samules-5:hover {
  color: #f0094a;
  background: transparent;
  box-shadow:none;
}
.samules-5:before,
.samules-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;
}
.samules-5:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.samules-5:hover:before,
.samules-5:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* 6 */
.samules-6 {
  background: rgb(247,150,192);
background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.samules-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.samules-6:before,
.samules-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);
}
.samules-6:before {
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.samules-6:after {
  left: 0;
  bottom: 0;
  transition: all 500ms ease;
}
.samules-6:hover{
  background: transparent;
  color: #76aef1;
  box-shadow: none;
}
.samules-6:hover:before {
  transition: all 500ms ease;
  height: 100%;
}
.samules-6:hover:after {
  transition: all 500ms ease;
  height: 100%;
}
.samules-6 span:before,
.samules-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);
}
.samules-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: .5px;
  transition: all 500ms ease;
}
.samules-6 span:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: .5px;
  transition: all 500ms ease;
}
.samules-6 span:hover:before {
  width: 100%;
}
.samules-6 span:hover:after {
  width: 100%;
}

/* 7 */
.samules-7 {
background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.samules-7 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.samules-7:before,
.samules-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;
}
.samules-7:before{
  height: 0%;
  width: 2px;
}
.samules-7:after {
  width: 0%;
  height: 2px;
}
.samules-7:hover{
  color: rgba(251,75,2,1);
  background: transparent;
}
.samules-7:hover:before {
  height: 100%;
}
.samules-7:hover:after {
  width: 100%;
}
.samules-7 span:before,
.samules-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;
}
.samules-7 span:before {
  width: 2px;
  height: 0%;
}
.samules-7 span:after {
  height: 2px;
  width: 0%;
}
.samules-7 span:hover:before {
  height: 100%;
}
.samules-7 span:hover:after {
  width: 100%;
}

/* 8 */
.samules-8 {
  background-color: #f0ecfc;
background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.samules-8 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.samules-8:before,
.samules-8:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #c797eb;
  /*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);*/
  transition: all 0.3s ease;
}
.samules-8:before{
  height: 0%;
  width: 2px;
}
.samules-8:after {
  width: 0%;
  height: 2px;
}
.samules-8:hover:before {
  height: 100%;
}
.samules-8:hover:after {
  width: 100%;
}
.samules-8:hover{
  background: transparent;
}
.samules-8 span:hover{
  color: #c797eb;
}
.samules-8 span:before,
.samules-8 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #c797eb;
  /*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);*/
  transition: all 0.3s ease;
}
.samules-8 span:before {
  width: 2px;
  height: 0%;
}
.samules-8 span:after {
  height: 2px;
  width: 0%;
}
.samules-8 span:hover:before {
  height: 100%;
}
.samules-8 span:hover:after {
  width: 100%;
}


/* 9 */
.samules-9 {
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.samules-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1fd1f9;
background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
  transition: all 0.3s ease;
}
.samules-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;
}
.samules-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 */
.samules-10 {
  background: rgb(22,9,240);
background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);
  color: #fff;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.samules-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);
}
.samules-10:hover {
  color: #fff;
  border: none;
  background: transparent;
}
.samules-10:hover:after {
  background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(2,126,251,1) 0%, rgba(0,3,255,1)100%);
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 11 */
.samules-11 {
  border: none;
  background: rgb(251,33,117);
  background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
  color: #fff;
  overflow: hidden;
}
.samules-11:hover {
  text-decoration: none;
  color: #fff;
}
.samules-11:before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-samules1 3s ease-in-out infinite;
}
.samules-11:hover{
  opacity: .7;
}
.samules-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-keyorganizations shiny-samules1 {
  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 */
.samules-12{
  position: relative;
  right: 20px;
  bottom: 20px;
  border:none;
  box-shadow: none;
  width: 130px;
  height: 40px;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.samules-12 span {
  background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
  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: 5px;
  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;
}
.samules-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;
}
.samules-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;
}
.samules-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);
}
.samules-12:hover span:nth-child(2) {
  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);
  color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

/* 13 */
.samules-13 {
  background-color: #89d8d3;
background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
  border: none;
  z-index: 1;
}
.samules-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  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;
}
.samules-13:hover {
  color: #fff;
}
.samules-13:hover:after {
  top: 0;
  height: 100%;
}
.samules-13:active {
  top: 2px;
}

/* 14 */
.samules-14 {
  background: rgb(255,151,0);
  border: none;
  z-index: 1;
}
.samules-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #eaf818;
  background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
  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;
}
.samules-14:hover {
  color: #000;
}
.samules-14:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.samules-14:active {
  top: 2px;
}

/* 15 */
.samules-15 {
  background: #b621fe;
  border: none;
  z-index: 1;
}
.samules-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background-color: #663dff;
  border-radius: 5px;
  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;
}
.samules-15:hover {
  color: #fff;
}
.samules-15:hover:after {
  left: 0;
  width: 100%;
}
.samules-15:active {
  top: 2px;
}

/* 16 */
.samules-16 {
  border: none;
  color: #000;
}
.samules-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  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;
}
.samules-16:hover {
  color: #000;
}
.samules-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.samules-16:active {
  top: 2px;
}

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

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

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

17 Августа 2020 Загрузок: 1 Просмотров: 1184 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 23 Августа 2020 01:23¹ 0 Вот еще несколько наборов на кнопки, где один набор идет полностью темный, но второй уже разный по цветовой гамме. Но если рассматривать эффект трюка, то здесь есть схожие, но смотря цветовой палитре, то при наведение клика они совершенно по другому анимация представляется. Темные кнопки с эффектами при помощи CSS 15 кнопок с помощью hover-эффектов CSS