节日特色折叠卡片 [纯 CSS]

M992.com 2022-4-23 1885

/* CSS reset */
*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
html { font-size: 62.5%; }
body {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  position: relative;
}
/* Typography =======================*/
/* Headings */
/* Main heading for card's front cover */
.card-front__heading {
  font-size: 1.5rem;
  margin-top: .25rem;
}
/* Main heading for inside page */
.inside-page__heading { 
  padding-bottom: 1rem; 
  width: 100%;
}
/* Mixed */
/* For both inside page's main heading and 'view me' text on card front cover */
.inside-page__heading,
.card-front__text-view {
  font-size: 1.3rem;
  font-weight: 800;
  margin-top: .2rem;
}
.inside-page__heading--city,
.card-front__text-view--city { color: #ff62b2; }
.inside-page__heading--ski,
.card-front__text-view--ski { color: #2aaac1; }
.inside-page__heading--beach,
.card-front__text-view--beach { color: #fa7f67; }
.inside-page__heading--camping,
.card-front__text-view--camping { color: #00b97c; }
/* Front cover */
.card-front__tp { color: #fafbfa; }
/* For pricing text on card front cover */
.card-front__text-price {
  font-size: 1.2rem;
  margin-top: -.2rem;
}
/* Back cover */
/* For inside page's body text */
.inside-page__text {
  color: #333;
}
/* Icons ===========================================*/
.card-front__icon {
  fill: #fafbfa;
  font-size: 3vw;
  height: 3.25rem;
  margin-top: -.5rem;
  width: 3.25rem;
}
/* Buttons =================================================*/
.inside-page__btn {
  background-color: transparent;
  border: 3px solid;
  border-radius: .5rem;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 2rem;
  overflow: hidden;
  padding: .7rem .75rem;
  position: relative;
  text-decoration: none;
  transition: all .3s ease;
  width: 90%;
  z-index: 10;
}
.inside-page__btn::before { 
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scaleY(0);
  transition: all .3s ease;
  width: 100%;
  z-index: -1;
}
.inside-page__btn--city { 
  border-color: #ff40a1;
  color: #ff40a1;
}
.inside-page__btn--city::before { 
  background-color: #ff40a1;
}
.inside-page__btn--ski { 
  border-color: #279eb2;
  color: #279eb2;
}
.inside-page__btn--ski::before { 
  background-color: #279eb2;
}
.inside-page__btn--beach { 
  border-color: #fa7f67;
  color: #fa7f67;
}
.inside-page__btn--beach::before { 
  background-color: #fa7f67;
}
.inside-page__btn--camping { 
  border-color: #00b97d;
  color: #00b97d;
}
.inside-page__btn--camping::before { 
  background-color: #00b97d;
}
.inside-page__btn:hover { 
  color: #fafbfa;
}
.inside-page__btn:hover::before { 
  transform: scaleY(1);
}
/* Layout Structure=========================================*/