Jumping on the glowing buttons and box shadow band wagon with this one
A Pen by Jamie Coulter on CodePen.
Created
January 5, 2018 02:57
-
-
Save CodeMyUI/0138c5dc0edb08e41b8fa8e54aaf42b8 to your computer and use it in GitHub Desktop.
CSS Price Cards
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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);} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment