Button by aaronross1
#e8e8e8
1.edit-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 text-decoration: none !important; 17} 18 19.edit-svgIcon { 20 width: 17px; 21 transition-duration: 0.3s; 22} 23 24.edit-svgIcon path { 25 fill: white; 26} 27 28.edit-button:hover { 29 width: 120px; 30 border-radius: 50px; 31 transition-duration: 0.3s; 32 background-color: rgb(255, 69, 69); 33 align-items: center; 34} 35 36.edit-button:hover .edit-svgIcon { 37 width: 20px; 38 transition-duration: 0.3s; 39 transform: translateY(60%); 40 -webkit-transform: rotate(360deg); 41 -moz-transform: rotate(360deg); 42 -o-transform: rotate(360deg); 43 -ms-transform: rotate(360deg); 44 transform: rotate(360deg); 45} 46 47.edit-button::before { 48 display: none; 49 content: "Edit"; 50 color: white; 51 transition-duration: 0.3s; 52 font-size: 2px; 53} 54 55.edit-button:hover::before { 56 display: block; 57 padding-right: 10px; 58 font-size: 13px; 59 opacity: 1; 60 transform: translateY(0px); 61 transition-duration: 0.3s; 62} 63
1.9K views
1.9K views
Variations
1 MIT License