Button by aaronross1
#e8e8e8
1.delete-button { 2 width: 40px; 3 height: 40px; 4 border-radius: 50%; 5 background-color: rgb(20, 20, 20); 6 border: none; 7 font-weight: 600; 8 display: flex; 9 align-items: center; 10 justify-content: center; 11 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164); 12 cursor: pointer; 13 transition-duration: 0.3s; 14 overflow: hidden; 15 position: relative; 16} 17 18.delete-svgIcon { 19 width: 15px; 20 transition-duration: 0.3s; 21} 22 23.delete-svgIcon path { 24 fill: white; 25} 26 27.delete-button:hover { 28 width: 90px; 29 border-radius: 50px; 30 transition-duration: 0.3s; 31 background-color: rgb(255, 69, 69); 32 align-items: center; 33} 34 35.delete-button:hover .delete-svgIcon { 36 width: 20px; 37 transition-duration: 0.3s; 38 transform: translateY(60%); 39 -webkit-transform: rotate(360deg); 40 -moz-transform: rotate(360deg); 41 -o-transform: rotate(360deg); 42 -ms-transform: rotate(360deg); 43 transform: rotate(360deg); 44} 45 46.delete-button::before { 47 display: none; 48 content: "Delete"; 49 color: white; 50 transition-duration: 0.3s; 51 font-size: 2px; 52} 53 54.delete-button:hover::before { 55 display: block; 56 padding-right: 10px; 57 font-size: 13px; 58 opacity: 1; 59 transform: translateY(0px); 60 transition-duration: 0.3s; 61}
1.8K views
Variation of abutton
MIT License