#e8e8e8
1.Btn { 2 width: 50px; 3 height: 50px; 4 border: 2px solid rgb(214, 214, 214); 5 border-radius: 15px; 6 background-color: rgb(255, 255, 255); 7 display: flex; 8 flex-direction: column; 9 align-items: center; 10 justify-content: center; 11 cursor: pointer; 12 position: relative; 13 transition-duration: 0.3s; 14 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11); 15} 16 17.svgIcon { 18 fill: rgb(70, 70, 70); 19} 20 21.icon2 { 22 width: 18px; 23 height: 5px; 24 border-bottom: 2px solid rgb(70, 70, 70); 25 border-left: 2px solid rgb(70, 70, 70); 26 border-right: 2px solid rgb(70, 70, 70); 27} 28 29.Btn:hover { 30 background-color: rgb(51, 51, 51); 31 transition-duration: 0.3s; 32} 33 34.Btn:hover .icon2 { 35 border-bottom: 2px solid rgb(235, 235, 235); 36 border-left: 2px solid rgb(235, 235, 235); 37 border-right: 2px solid rgb(235, 235, 235); 38} 39 40.Btn:hover .svgIcon { 41 fill: rgb(255, 255, 255); 42 animation: slide-in-top 1s linear infinite; 43} 44 45@keyframes slide-in-top { 46 0% { 47 transform: translateY(-10px); 48 opacity: 0; 49 } 50 51 100% { 52 transform: translateY(0px); 53 opacity: 1; 54 } 55} 56
199 views
199 views
Comments
MIT License