CSS Price Cards

css-price-cards.markdown

CSS Price Cards

Jumping on the glowing buttons and box shadow band wagon with this one

A Pen by Jamie Coulter on CodePen.

License.

index.haml

.container
  %section.card
    .card_inner
      .card_inner__circle
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rocket.png'}
      .card_inner__header
        %img{:src => 'http://www.pixeden.com/media/k2/galleries/343/002-city-vector-background-town-vol2.jpg'}
      .card_inner__content
        .title Personal edition
        .price $19.99
        .text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at posuere eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. <br/> <br/>Fusce sed tortor in orci ultrices tempor quis ut leo. Fusce imperdiet eget ante eu faucibus. Nam rhoncus sapien
      .card_inner__cta
        %button 
          %span Buy now
  %section.card
    .card_inner
      .card_inner__circle
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cog.png'}
      .card_inner__header
        %img{:src => 'http://4vector.com/i/free-vector-modern-city_093317_bluecity.jpg'}
      .card_inner__content
        .title Team edition
        .price $49.99
        .text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at posuere eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. <br/> <br/>Fusce sed tortor in orci ultrices tempor quis ut leo. Fusce imperdiet eget ante eu faucibus. Nam rhoncus sapien
      .card_inner__cta
        %button 
          %span 
            %a{:href => 'https://www.codepen.io/jcoulterdesign',:target => '_blank'}Follow me on codepen
  %section.card
    .card_inner
      .card_inner__circle
        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paperplane.png'}
      .card_inner__header
        %img{:src => 'http://7428.net/wp-content/uploads/2013/06/Forest-Creek.jpg'}
      .card_inner__content
        .title Enterprise edition
        .price $89.99
        .text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at posuere eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. <br/> <br/>Fusce sed tortor in orci ultrices tempor quis ut leo. Fusce imperdiet eget ante eu faucibus. Nam rhoncus sapien
      .card_inner__cta
        %button 
          %span Buy now

style.scss

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300);

body{
  font-family: 'Yanone Kaffeesatz', sans-serif;
  a{
    text-decoration:none;
    color:white;
  }
  .container{
    width:938px;
    position:absolute;
    top:50%;
    left:30px;
    right:0;

    transform:translateY(-50%);
    margin:auto;
    .card{

      margin:0 auto;
      display:inline-block;
      margin-right:30px;
      @for $i from 1 through 3{
        &:nth-of-type(#{$i}){
          animation:intro 1s ($i * .1s) forwards;
        }
      }
      transform:scale(0);
      width:280px;
      text-align:center;
      position:relative;
      transition:all .2s;
      cursor:pointer;
      opacity:0.5;
      box-shadow: 0px 17px 46px -10px #777777;
      height:470px;
      border-radius:14px;
      &:nth-of-type(1){
        background: -webkit-linear-gradient(45deg, #c96881 0%,#f7b695 100%);
        //background: -moz-linear-gradient(45deg, #c96881 0%,#f7b695 100%);
      }
      &:nth-of-type(2){
        background: -webkit-linear-gradient(45deg, #6B6ECC 0%, #89BFDF 100%);
        //background: -moz-linear-gradient(45deg, #6B6ECC 0%, #89BFDF 100%);
      }
      &:nth-of-type(3){
        background: -webkit-linear-gradient(45deg, #81B77B 0%, #A3E3C3 100%);
        //background: -moz-linear-gradient(45deg, #81B77B 0%, #A3E3C3 100%);
      }

      &:hover .card_inner__header img{
        left:-50px;
        transition:all 3.4s linear
      }
      &:hover .card_inner__cta button{
        transform:scale(1)
      }
      &:nth-of-type(1){
        &:hover .card_inner__circle img{
          animation:launch 1s forwards;
        }
        .card_inner__circle img{
          top:22px;
          left:1px
        }
      }
      &:nth-of-type(2){
        &:hover .card_inner__circle img{
          animation:spin 1s forwards
        }
        .card_inner__circle img{
          top:22px;
        }
      }
      &:nth-of-type(3){
        &:hover .card_inner__circle img{
          animation:fly 1s forwards
        }
        .card_inner__circle img{
          top:22px;
          left:1px
        }
      }

      &:hover{
        opacity:1;
      }
      &_inner{
        &__circle{
          overflow:hidden;
          width: 70px;
          position: absolute;
          background: #F1F0ED;
          z-index: 10;
          height: 70px;
          border-radius: 100px;
          left: 0;
          box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.28);
          right: 0;
          margin: auto;
          border: 4px solid rgb(255, 255, 255);
          top: 82px;
          img{
            height:26px;
            position:relative;
            top:17px;
            transition:all .2s;
          }
        }
        &__header{
          height:120px;
          border-top-left-radius:14px;
          border-top-right-radius:14px;
          overflow:hidden;
          img{
            width:120%;
            position:relative;
            top:-30px;
            left:0;
            transition:all .1s linear
          }
        }
        &__content{
          padding:20px;
          .price{
            color: white;
            font-weight: 800;
            font-size: 70px;
            text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.42);
          }
          .text{
            color: rgba(255, 255, 255, 0.60);
            font-weight:100;
            margin-top:20px;
            font-size:13px;
            line-height:16px;
          }
          .title{
            font-weight: 800;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.64);
            margin-top:40px;
            font-size: 25px;
            letter-spacing: 1px;
          }
        }
        &__cta{
          position:absolute;
          bottom:-24px;
          left:0;
          right:0;
          margin:auto;
          width:200px;
          button{
            padding:16px;
            box-shadow: 0px 0px 40px 4px #F76583, 0px 0px 0px 2px rgba(255, 255, 255, 0.19) inset;
            width:100%;
            background: -webkit-linear-gradient(-90deg, #fe5e7d 0%,#e5375b 100%);
            //background: -moz-linear-gradient(-90deg, #fe5e7d 0%,#e5375b 100%);
            border:none;
            font-family: 'Yanone Kaffeesatz', sans-serif;
            color:white;
            outline:none;
            font-size:20px;
            border-radius:6px;
            transform:scale(.94);
            cursor:pointer;
            transition:box-shadow .3s, transform .3s .1s;
            span{
              text-shadow: 0px 4px 18px #BA3F57;
            }
            &:hover{
              box-shadow: 0px 0px 60px 8px #F76583, 0px 0px 0px 2px rgba(255, 255, 255, 0.19) inset;
            }
          }
        }
      }
    }
  }
}

@keyframes launch{
  0%{left:1px;}
  25%{top:-50px;left:1px}
  50%{left:-100px;}
  75%{top:100px;transform:rotate(40deg)}
  100%{left:1px}
}

@keyframes fly{
  0%{left:0px;}
  25%{top:-50px;left:50px}
  50%{left:-130px;}
  75%{top:60px;}
  100%{left:0px}
}

@keyframes spin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(720deg)}
}

@keyframes intro{
  0%{transform:scale(0);}
  25%{transform:scale(1.06);}
  50%{transform:scale(.965);}
  75%{transform:scale(1.02);}
  100%{transform:scale(1);}
}