Card by alexreyes091
#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 padding: 2%; 5 background: rgb(255, 255, 255); 6 border-bottom: 2px solid blueviolet; 7 border-right: 2px solid blueviolet; 8 border-top: 2px solid white; 9 border-left: 2px solid white; 10 transition-duration: 1s; 11 transition-property: border-top, 12 border-left, 13 border-bottom, 14 border-right, 15 box-shadow; 16} 17 18.card:hover { 19 border-top: 2px solid blueviolet; 20 border-left: 2px solid blueviolet; 21 border-bottom: 2px solid rgb(238, 103, 238); 22 border-right: 2px solid rgb(238, 103, 238); 23 box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px; 24} 25 26.card__content { 27 font-size: small; 28 text-align: center; 29} 30 31.card__content-heading { 32 color: blueviolet; 33} 34 35.card__content-body p { 36 color: rgb(118, 104, 128); 37 padding-bottom: 1rem; 38} 39 40.card__content-footer button { 41 background-color: rgb(255, 255, 255); 42 color: grey; 43 font-weight: 700; 44 border-radius: .2rem; 45 border: 1px solid grey; 46 padding: .5rem; 47 margin: 1rem; 48 transition-duration: 1s; 49 transition-property: background-color, color, border; 50} 51 52button:hover { 53 color: white; 54 background-color: rgb(238, 103, 238); 55 border: 1px solid white; 56 box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; 57} 58 59 60
2.7K views
2.7K views
MIT License