Button by vinodjangid07
#e8e8e8
1.readmore-btn { 2 width: fit-contentd; 3 height: 55px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 cursor: pointer; 8 background-color: rgb(186, 125, 255); 9 border: none; 10 border-radius: 10px; 11 padding: 0px 15px; 12 gap: 0px; 13 transition: all 0.4s; 14} 15.book-wrapper { 16 display: flex; 17 align-items: center; 18 justify-content: flex-end; 19 position: relative; 20 width: 45px; 21 height: 100%; 22} 23.book-wrapper .book-page { 24 width: 50%; 25 height: auto; 26 position: absolute; 27} 28.readmore-btn:hover .book-page { 29 animation: paging 0.4s linear infinite; 30 transform-origin: left; 31} 32.readmore-btn:hover { 33 background-color: rgb(159, 74, 255); 34} 35@keyframes paging { 36 0% { 37 transform: rotateY(0deg) skewY(0deg); 38 } 39 50% { 40 transform: rotateY(90deg) skewY(-20deg); 41 } 42 100% { 43 transform: rotateY(180deg) skewY(0deg); 44 } 45} 46.text { 47 width: 105px; 48 height: 100%; 49 display: flex; 50 align-items: center; 51 justify-content: center; 52 font-weight: 600; 53 font-size: 15px; 54 color: rgb(255, 255, 255); 55} 56
636 views
636 views
MIT License