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

Кнопки 3D для сайта с CSS эффектом нажатие

Здесь рассмотрим 6 вариантов кнопок, которые выполнены в формате 3D, где присутствует красивые эффекты при нажатии, что выполнены на чистом CSS. В этой статье показаны несколько вариантов красивых примеров кнопок, которые выполнены на HTML и CSS, где все они имеют свой оригинальный эффект. А точнее в материале представлен 3D-стиль с активными эффектами, где будет анимация при наведении, а также при клике по основе кнопки. Ведь все представленные кнопки выглядят в уникальном стиле, где основание приподнятое над фоном или темной нижней границей.

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

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

3D-стиль с активными эффектами

1. Вариант:

3D кнопок для сайта с анимацией на CSS

HTML

Код

<a href="#" class="pervaya_variatsiya_3d">ZORNET.RU #1</a>

CSS

Код

.pervaya_variatsiya_3d {
  display: inline-block;
  padding: 0.8em 2em;
  text-decoration: none;
  background: #5378ca;
  color: #fdf9f9;
  border-bottom: solid 4px #455679;
  border-radius: 2px;
}
.pervaya_variatsiya_3d:active {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}

Это первая вариация, где при клике происходит трюк нажатия.

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

2. Вариант:

3D кнопки с помощью CSS3

HTML

Код

<a href="#" class="vtoroy_variant-3d">ZORNET.RU #2</a>

CSS

Код

.vtoroy_variant-3d {
  display: inline-block;
  padding: 0.9em 3em;
  text-decoration: none;
  background: #4ed86c;
  color: #f9f9f9;
  border-bottom: solid 4px #4e7d51;
  border-radius: 5px;
}
.vtoroy_variant-3d:active {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(23, 23, 23, 0.2);
  border-bottom: none;
}

Этот вариант аналогичен первому, только идет с коробчатой тенью.

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

3. Вариант:

Красивые 3D-кнопки с помощью CSS3

HTML

Код

<a href="#" class="tretiye_varianta_3d">ZORNET.RU #3</a>

CSS

Код

.tretiye_varianta_3d {
  display: inline-block;
  padding: 0.8em 3em;
  text-decoration: none;
  background: #cc60da;
  color: #833b94;
  box-shadow: 0px 2px 2px rgba(29, 29, 29, 0.29);
  border-bottom: solid 3px #77497d;
  border-radius: 3px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(232, 232, 232, 0.55);
}

.tretiye_varianta_3d:active {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(14, 14, 14, 0.2);
  border-bottom: none;
}

Здесь наблюдаем вариант с тиснением текста.

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

4. Вариант:

Создание 3D кнопки на CSS

HTML

Код

<a href="#" class="chetvertaya_varianta_3d">ZORNET.RU #4</a>

CSS

Код

.chetvertaya_varianta_3d {
  display: inline-block;
  padding: 1em 3em;
  text-decoration: none;
  background: #557aca;
  color: #7196e6;
  box-shadow: 0px 2px 2px rgba(27, 27, 27, 0.34);
  border-bottom: solid 3px #576686;
  border-radius: 3px;
  font-weight: bold;
  text-shadow: -1px -1px rgba(247, 247, 247, 0.5), 1px 1px rgba(8, 8, 8, 0.54);
}

.chetvertaya_varianta_3d:active{
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(8, 8, 8, 0.2);
  border-bottom: none;
}

Здесь видим вариант с с поднятым текстом, где добавлены светлые тени.

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

5. Вариант:

Делаем красивые 3D-кнопки на чистом CSS

HTML

Код

<a href="#" class="pyataya_stagua_3d">ZORNET.RU #5</a>

CSS

Код

.pyataya_stagua_3d {
  display: inline-block;
  position: relative;
  padding: 0.98em 2.94em;
  text-decoration: none;
  background: #6035ad;
  color: #f5f2f2;
  border-bottom: solid 5px #3f256f;
  border-right: solid 5px #8160bb;
}

.pyataya_stagua_3d:before{
  content: " ";
  position: absolute;
  bottom: -5px;
  left: -1px;
  width: 0;
  height: 0;
  border-width: 0 5px 5px 0px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #f9f7f7;
}

.pyataya_stagua_3d:after{
  content: " ";
  position: absolute;
  top: -1px;
  right: -5px;
  width: 0;
  height: 0;
  border-width: 0px 5px 5px 0px;
  border-style: solid;
  border-color: #f9f7f7;
  border-bottom-color: transparent;
}

.pyataya_stagua_3d:active{ /*on click*/
  border:none;
  -ms-transform: translate(5px,5px);
  -webkit-transform: translate(5px,5px);
  transform: translate(5px,5px);
}

.pyataya_stagua_3d:active:after,
.pyataya_stagua_3d:active:before {
  content: none;
}

Здесь кнопку по дизайну выстроили немного наискось.

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

6. Вариант:

Кнопки для сайта html и css

HTML

Код

<a href="#" class="shestaya_stadiya_3d">ZORNET.RU #6</a>

CSS

Код

.shestaya_stadiya_3d {
  display: inline-block;
  position: relative;
  padding: 0.86em 2.98em;
  background: #2f9661;
  color: #f9f9f9;
  text-decoration: none;
}

.shestaya_stadiya_3d:before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: -webkit-calc(100% - 16px);
  width: calc(100% - 16px);
  height: 0;
  border: solid 8px rgba(12, 12, 12, 0);
  border-bottom-color: #44b592;
}

.shestaya_stadiya_3d:active{
  padding: 0.46em 0.8em;
  -ms-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.shestaya_stadiya_3d:active:before{
  width: -webkit-calc(100% - 12px);
  width: calc(100% - 12px);
}

.shestaya_stadiya_3d:active:before{
  top:-12px;
  border-width: 6px;
}

Здесь задаем основу, чтоб бы был обзор сверху.

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

Если у вас возникло изменение стиля, то можно придать им более реалистичный вид, где можно было бы неплохо использовать эффект Emoboss с помощью text-shadow, где получаем 3D формат кнопок взаимодействий с CSS3.

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

23 Мая 2020 Загрузок: 1 Просмотров: 3072 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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