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

Темные кнопки с эффектами при помощи CSS

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

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

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

Здесь вся подборка, и ссылка внизу на demo страницу:

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

Установка:

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

HTML

Код

<button class="temuny_knopka cukan-1">Первая</button>
  <button class="temuny_knopka cukan-2">Вторая</button>
  <button class="temuny_knopka cukan-3"><span>Третья</span></button>
  <button class="temuny_knopka cukan-4">Четвертая</button>
  <button class="temuny_knopka cukan-5"><span>Пятая</span></button>
  <button class="temuny_knopka cukan-6"><span>Шестая</span></button>
  <button class="temuny_knopka cukan-7">Седьмая</button>
  <button class="temuny_knopka cukan-8">Восьмая</button>
  <button class="temuny_knopka cukan-9">Read More</button>
  <button class="temuny_knopka cukan-10">Девятая</button>
  <button class="temuny_knopka cukan-11">Десять</button>
  <button class="temuny_knopka cukan-12"><span>Скрипты</span><span>Шаблоны</span></button>
  <button class="temuny_knopka cukan-13">Анимация</button>
  <button class="temuny_knopka cukan-14">Эффекты</button>
  <button class="temuny_knopka cukan-15">Кнопки</button>
  <button class="temuny_knopka cukan-16">Разные</button>

CSS

Код

.temuny_knopka {
  width: 145px;
  height: 42px;
  padding: 10px 25px;
  border: 2px solid #313131;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: rgb(0 0 0 / 0%);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

/* 1 */
.cukan-1 {
  transition: all 0.3s ease;
}
.cukan-1:hover {
  box-shadow:
  -7px -7px 20px 0px #f7f3f39,
  -4px -4px 5px 0px #f7f3f39,
  7px 7px 20px 0px #1919192,
  4px 4px 5px 0px #1919191;
}

/* 2 */
.cukan-2 {

}
.cukan-2:before {
  height: 0%;
  width: 2px;
}
.cukan-2:after {
  position: absolute;
  content: "";
  top: 5px;
  left: 6px;
  width: 90%;
  height: 70%;
  border: 1px solid #191919;
  opacity: 0;
  transition: all 0.3s ease;
}
.cukan-2:hover:after {
  opacity: 1;
}

/* 3 */
.cukan-3 {
  line-height: 39px;
  padding: 0;
}
.cukan-3:hover{
  background: transparent;
  color: #191919;
}
.cukan-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.cukan-3:before,
.cukan-3:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #191919;
  transition: all 0.3s ease;
}
.cukan-3:before {
  height: 0%;
  width: 2px;
}
.cukan-3:after {
  width: 0%;
  height: 2px;
}
.cukan-3:hover:before {
  height: 100%;
}
.cukan-3:hover:after {
  width: 100%;
}
.cukan-3 span:before,
.cukan-3 span:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #191919;
  transition: all 0.3s ease;
}
.cukan-3 span:before {
  width: 2px;
  height: 0%;
}
.cukan-3 span:after {
  width: 0%;
  height: 2px;
}
.cukan-3 span:hover:before {
  height: 100%;
}
.cukan-3 span:hover:after {
  width: 100%;
}

/* 4 */
.cukan-4 {
  position: relative;
  color: #191919;
  z-index: 2;
  line-height: 40px;
  padding: 0;
}
.cukan-4:hover{
  border: none;
}
.cukan-4:before,
.cukan-4:after {
  position: absolute;
  content: "";
  width: 0%;
  height: 0%;
  border: 2px solid;
  z-index: -1;
  transition: all 0.3s ease;
}
.cukan-4:before {
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: #191919;
  border-left-color: #191919;
}
.cukan-4:after{
  bottom: 0;
  right: 0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: #191919;
  border-right-color: #191919;
}
.cukan-4:hover:before,
.cukan-4:hover:after {
  border-color: #191919;
  height: 100%;
  width: 100%;
}

/* 5 */
.cukan-5 {
  background: #191919;
  color: #f7f3f3;
  line-height: 42px;
  padding: 0;
  border: none;
}
.cukan-5:hover {
  background: transparent;
  color: #191919;
  box-shadow:
  -7px -7px 20px 0px #f7f3f39,
  -4px -4px 5px 0px #f7f3f39,
  7px 7px 20px 0px #1919192,
  4px 4px 5px 0px #1919191;
}
.cukan-5:before,
.cukan-5:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #191919;
  transition:400ms ease all;
}
.cukan-5:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.cukan-5:hover:before,
.cukan-5:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* 6 */
.cukan-6 {
  background: #191919;
  color: #f7f3f3;
  line-height: 42px;
  padding: 0;
  border: none;
}
.cukan-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.cukan-6:before,
.cukan-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 2px;
  background: #191919;
}
.cukan-6:before {
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.cukan-6:after {
  left: 0;
  bottom: 0;
  transition: all 500ms ease;
}
.cukan-6:hover{
  color: #191919;
  background: transparent;
}
.cukan-6:hover:before {
  transition: all 500ms ease;
  height: 100%;
}
.cukan-6:hover:after {
  transition: all 500ms ease;
  height: 100%;
}
.cukan-6 span:before,
.cukan-6 span:after {
  position: absolute;
  content: "";
  background: #191919;
}
.cukan-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: 2px;
  transition: all 500ms ease;
}
.cukan-6 span:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  transition: all 500ms ease;
}
.cukan-6 span:hover:before {
  width: 100%;
}
.cukan-6 span:hover:after {
  width: 100%;
}

/* 7 */
.cukan-7 {
  background: #191919;
  color: #f7f3f3;
  line-height: 42px;
  padding: 0;
  border: none;
  z-index: 1;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.cukan-7:hover {
  background: transparent;
  color: #191919;
}
.cukan-7:before,
.cukan-7:after {
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  height: 50%;
  right: 0;
  z-index: -1;
  background: #191919;
  transition: all 0.3s ease;
}
.cukan-7:before {
  top: 0;
}
.cukan-7:after {
  bottom: 0;
}
.cukan-7:hover:before,
.cukan-7:hover:after {
  height: 0;
  background-color: #191919;
}

/* 8 */
.cukan-8 {
  line-height: 40px;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 2;
  color: #f7f3f3;
  -webkit-perspective: 300px;
  perspective: 300px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.cukan-8:hover{
  color: #191919;
}
.cukan-8:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #191919;
  z-index: -1;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  transition: all 0.3s ease;
}
.cukan-8:hover:after {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}


/* 9 */
.cukan-9 {
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden;
}
.cukan-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.cukan-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: #f7f3f3;
}
.cukan-9:hover:after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  background: #191919;
  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 */
.cukan-10 {
  transition: all 0.3s ease;
  overflow: hidden;
}
.cukan-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);
}
.cukan-10:hover {
  color: #f7f3f3;
}
.cukan-10:hover:after {
  background: #191919;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 11 */
.cukan-11 {
  overflow: hidden;
  transition: all 0.3s ease;
}
.cukan-11:hover {
  background: #191919;
  color: #f7f3f3;
}
.cukan-11:before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #f7f3f3;
  animation: shiny-cukan1 3s ease-in-out infinite;
}
.cukan-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-cukan1 {
  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 */
.cukan-12{
  position: relative;
  right: 20px;
  bottom: 20px;
  border:none;
  width: 130px;
  height: 40px;
  line-height: 40px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.cukan-12 span {
  display: block;
  position: absolute;
  width: 130px;
  height: 40px;
  border: 2px solid #191919;
  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;
}
.cukan-12 span:nth-child(1) {
  box-shadow:
  -7px -7px 20px 0px #f7f3f39,
  -4px -4px 5px 0px #f7f3f39,
  7px 7px 20px 0px #1919192,
  4px 4px 5px 0px #1919191;
  -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;
}
.cukan-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;
}
.cukan-12:hover span:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.cukan-12:hover span:nth-child(2) {
  background: #e0e5ec;
  color: #e0e5ec;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

/* 13 */
.cukan-13 {
  background: #191919;
  color: #f7f3f3;
  z-index: 1;
}
.cukan-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #e0e5ec;
  transition: all 0.3s ease;
}
.cukan-13:hover {
  color: #191919;
}
.cukan-13:hover:after {
  top: 0;
  height: 100%;
}
.cukan-13:active {
  top: 2px;
}

/* 14 */
.cukan-14 {
  background: #191919;
  color: #f7f3f3;
  z-index: 1;
}
.cukan-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: #e0e5ec;
  transition: all 0.3s ease;
}
.cukan-14:hover {
  color: #191919;
}
.cukan-14:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.cukan-14:active {
  top: 2px;
}

/* 15 */
.cukan-15 {
  background: #191919;
  color: #f7f3f3;
  z-index: 1;
}
.cukan-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #e0e5ec;
  transition: all 0.3s ease;
}
.cukan-15:hover {
  color: #191919;
}
.cukan-15:hover:after {
  left: 0;
  width: 100%;
}
.cukan-15:active {
  top: 2px;
}

/* 16 */
.cukan-16 {
  background: #191919;
  color: #f7f3f3;
  z-index: 1;
}
.cukan-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  background: #e0e5ec;
  transition: all 0.3s ease;
}
.cukan-16:hover {
  color: #191919;
}
.cukan-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.cukan-16:active {
  top: 2px;
}

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

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

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

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

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

СКАЧАТЬ

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

Kosten

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