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

15 кнопок с помощью hover-эффектов CSS

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

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

Так выглядит один элемент их этой подборки:

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

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

Установка:

HTML

Код

<div class="selection_buttons">
  <button class="keaugusa_design alemun-1">Скачать №1</button>
  <button class="keaugusa_design alemun-2">Скачать №2</button>
  <button class="keaugusa_design alemun-3"><span>Скачать №3</span></button>
  <button class="keaugusa_design alemun-4"><span>Скачать №4</span></button>
  <button class="keaugusa_design alemun-5"><span>Скачать №5</span></button>
  <button class="keaugusa_design alemun-6"><span>Скачать №6</span></button>
  <button class="keaugusa_design alemun-7"><span>Скачать №7</span></button>
  <button class="keaugusa_design alemun-8"><span>Скачать №8</span></button>
  <button class="keaugusa_design alemun-9">Скачать №9</button>
  <button class="keaugusa_design alemun-10">Скачать №10</button>
  <button class="keaugusa_design alemun-11">Скачать №11<div class="desugas"></div></button>
  <button class="keaugusa_design alemun-12"><span>ZORNET.RU</span><span>Скачать №12</span></button>
  <button class="keaugusa_design alemun-13">Скачать №13</button>
  <button class="keaugusa_design alemun-14">Скачать №14</button>
  <button class="keaugusa_design alemun-15">Скачать №15</button>
  <button class="keaugusa_design alemun-16">Скачать №15</button>
</div>

CSS

Код

.selection_buttons {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}
button {
  margin: 20px;
  outline: none;
}
.keaugusa_design {
  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;
}

/* 1 */
.alemun-1 {
  border: none;
}
.alemun-1:hover {
  box-shadow:
  -7px -7px 20px 0px #fff9,
  -4px -4px 5px 0px #fff9,
  7px 7px 20px 0px #0002,
  4px 4px 5px 0px #0001;
}

/* 2 */
.alemun-2 {
  border: none;
}
.alemun-2:before {
  height: 0%;
  width: 2px;
}
.alemun-2:hover {
  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);
}

/* 3 */
.alemun-3 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.alemun-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.alemun-3:before,
.alemun-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  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;
}
.alemun-3:before {
  height: 0%;
  width: 2px;
}
.alemun-3:after {
  width: 0%;
  height: 2px;
}
.alemun-3:hover:before {
  height: 100%;
}
.alemun-3:hover:after {
  width: 100%;
}
.alemun-3 span:before,
.alemun-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  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;
}
.alemun-3 span:before {
  width: 2px;
  height: 0%;
}
.alemun-3 span:after {
  width: 0%;
  height: 2px;
}
.alemun-3 span:hover:before {
  height: 100%;
}
.alemun-3 span:hover:after {
  width: 100%;
}

/* 4 */
.alemun-4 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.alemun-4 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.alemun-4:before,
.alemun-4:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  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;
}
.alemun-4:before {
  height: 0%;
  width: 2px;
}
.alemun-4:after {
  width: 0%;
  height: 2px;
}
.alemun-4:hover:before {
  height: 100%;
}
.alemun-4:hover:after {
  width: 100%;
}
.alemun-4 span:before,
.alemun-4 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  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;
}
.alemun-4 span:before {
  width: 2px;
  height: 0%;
}
.alemun-4 span:after {
  width: 0%;
  height: 2px;
}
.alemun-4 span:hover:before {
  height: 100%;
}
.alemun-4 span:hover:after {
  width: 100%;
}

/* 5 */
.alemun-5 {
  left: 10px;
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.alemun-5:hover {
  box-shadow:
  -7px -7px 20px 0px #fff9,
  -4px -4px 5px 0px #fff9,
  7px 7px 20px 0px #0002,
  4px 4px 5px 0px #0001;
}
.alemun-5:before,
.alemun-5:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  box-shadow:
  -7px -7px 20px 0px #fff,
  -4px -4px 5px 0px #fff,
  7px 7px 20px 0px #0003,
  4px 4px 5px 0px #0002;
  transition:400ms ease all;
}
.alemun-5:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.alemun-5:hover:before,
.alemun-5:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* 6 */
.alemun-6 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.alemun-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.alemun-6:before,
.alemun-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 2px;
  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);
}
.alemun-6:before {
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.alemun-6:after {
  left: 0;
  bottom: 0;
  transition: all 500ms ease;
}
.alemun-6:hover:before {
  transition: all 500ms ease;
  height: 100%;
}
.alemun-6:hover:after {
  transition: all 500ms ease;
  height: 100%;
}
.alemun-6 span:before,
.alemun-6 span:after {
  position: absolute;
  content: "";
  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);
}
.alemun-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: 2px;
  transition: all 500ms ease;
}
.alemun-6 span:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  transition: all 500ms ease;
}
.alemun-6 span:hover:before {
  width: 100%;
}
.alemun-6 span:hover:after {
  width: 100%;
}

/* 7 */
.alemun-7 {
  right: 15px;
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.alemun-7 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.alemun-7:before,
.alemun-7:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  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;
}
.alemun-7:before{
  height: 0%;
  width: 2px;
}
.alemun-7:after {
  width: 0%;
  height: 2px;
}
.alemun-7:hover:before {
  height: 100%;
}
.alemun-7:hover:after {
  width: 100%;
}
.alemun-7 span:before,
.alemun-7 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  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;
}
.alemun-7 span:before {
  width: 2px;
  height: 0%;
}
.alemun-7 span:after {
  height: 2px;
  width: 0%;
}
.alemun-7 span:hover:before {
  height: 100%;
}
.alemun-7 span:hover:after {
  width: 100%;
}

/**** alemun No. 8 ****/
.alemun-8 {
  right: 20px;
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.alemun-8 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.alemun-8:before,
.alemun-8:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  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;
}
.alemun-8:before{
  height: 0%;
  width: 2px;
}
.alemun-8:after {
  width: 0%;
  height: 2px;
}
.alemun-8:hover:before {
  height: 100%;
}
.alemun-8:hover:after {
  width: 100%;
}
.alemun-8 span:before,
.alemun-8 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  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;
}
.alemun-8 span:before {
  width: 2px;
  height: 0%;
}
.alemun-8 span:after {
  height: 2px;
  width: 0%;
}
.alemun-8 span:hover:before {
  height: 100%;
}
.alemun-8 span:hover:after {
  width: 100%;
}


/**** alemun No. 9 ****/
.alemun-9 {
  border: none;
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden;
}
.alemun-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.alemun-9:hover {
  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: #000;
}
.alemun-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 */
.alemun-10 {
  border: none;
  border-radius: 3px;
  transition: all 0.3s ease;
  overflow: hidden;
}
.alemun-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);
}
.alemun-10:hover {
  color: #000;
}
.alemun-10:hover:after {
  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);
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 11 */
.alemun-11 {
  border: none;
  transition: all 0.3s ease;
}
.desugas {
  content: '';
  position: absolute;
  top: 0;
  width: 8.5px;
  height: 100%;
  border-radius: 100%;
  transition: all 300ms ease;
  display: none;
}
.desugas:after {
  content: '';
  position: absolute;
  left: calc(50% - .4em);
  height: 8px;
  width: 8px;
  background: #e0e5ec;
  border-radius: 3px;
  box-shadow:
  -7px -7px 20px 0px #fff,
  -4px -4px 5px 0px #fff,
  7px 7px 20px 0px #0004,
  4px 4px 5px 0px #0004;
}
.alemun-11:hover .desugas,
.alemun-11:focus .desugas {
  animation: rotation 2s infinite linear;
  display: block;
}
@keyframes rotation {
  0% {transform: translateX(0) rotate(0);}
  30%{transform: translateX(60px) rotate(0);}
  50% {transform: translateX(60px) rotate(180deg);}
  80% {transform: translateX(0) rotate(180deg);}
  100% {transform: translateX(0) rotate(360deg);}
}

/* 12 */
.alemun-12{
  position: relative;
  right: 20px;
  bottom: 20px;
  border:none;
  width: 130px;
  height: 40px;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.alemun-12 span {
  display: block;
  position: absolute;
  width: 130px;
  height: 40px;
  border: none;
  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;
}
.alemun-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;
}
.alemun-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;
}
.alemun-12:hover span:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.alemun-12:hover span:nth-child(2) {
  background: #e0e5ec;
  color: #e0e5ec;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

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

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

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

/* 16 */
.alemun-16 {
  border: none;
}
.alemun-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;
}
.alemun-16:hover {
  color: #000;
}
.alemun-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.alemun-16:active {
  top: 2px;
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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