Tarjeta Shake

1776 Andev.web

Abrir en el editor Publica tu código

Recomendado

20 June 2025

Tarjetas de enlaces de redes sociales HTML

28 March 2025

Tarjetas móviles delineadas de CodePen Home

11 December 2024

Tarjeta responsiva

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif; 
}

.card {
  width: 320px;
  padding: 30px;
  background: #fff;
  border: 8px solid #000;
  box-shadow: 15px 15px 0 #000;
  transform: rotate(-2deg);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card:active {
  animation: shake 0.5s ease-in-out;
}

.card:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 20px 20px 0 #000;
}

.banner {
  position: absolute;
  top: 3px;
  right: -95px;
  background: #000;
  color: #fff;
  padding: 15px;
  width: 350px;
  text-align: center;
  transform: rotate(45deg);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 2px;
  overflow: hidden;
  transition: background 0.5s ease;
}

.banner-text {
  display: inline-block;
  transition: opacity 0.5s ease, transform 0.5s ease;
  width: 100%;
  position: absolute;
  left: 13%;
  top: 50%;
  transform: translateY(-50%);
}

.banner:hover .banner-text:first-child {
  opacity: 0;
  transform: translateY(-100%);
}

.banner:hover .banner-text:last-child {
  opacity: 1;
  transform: translateY(-40%);
}

.banner-text:last-child {
  opacity: 0;
  transform: translateY(60%);
}

.banner:hover {
  background: red;
}

.card__title {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
  border-bottom: 2px solid #000;
  width: 50%; 
}

.card__subtitle {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.card__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card__form input {
  padding: 12px;
  border: 4px solid #000;
  font-size: 16px;
  transition: all 0.3s ease;
  background-color: #fff;
}

.card__form input:focus {
  outline: none;
  transform: scale(1.05);
}

.sign-up {
  border: 4px solid #000;
  background: #000;
  color: #fff;
  padding: 12px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sign-up:hover {
  background: #fff;
  color: #000;
  transform: translateY(-5px);
  box-shadow: 0 5px 0 #000;
}

.sign-up:active {
  animation: shake 0.5s ease-in-out;
  transform: translateY(0);
  box-shadow: none;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

Recomendado

Tarjetas de enlaces de redes sociales HTML

Tarjetas móviles delineadas de CodePen Home

Tarjeta responsiva

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS