Button by Tsiangana
#e8e8e8
1.botao { 2 width: 125px; 3 height: 45px; 4 border-radius: 20px; 5 border: none; 6 box-shadow: 1px 1px rgba(107, 221, 215, 0.37); 7 padding: 5px 10px; 8 background-color: rgb(59, 190, 230); 9 color: #fff; 10 font-family: Roboto, sans-serif; 11 font-weight: 505; 12 font-size: 16px; 13 line-height: 1; 14 cursor: pointer; 15 filter: drop-shadow(0 0 10px rgba(59, 190, 230, 0.568)); 16 transition: 0.5s linear; 17} 18 19.botao .mysvg { 20 display: none; 21} 22 23.botao:hover { 24 width: 50px; 25 height: 50px; 26 border-radius: 50%; 27 transition: 0.5s linear; 28} 29 30.botao:hover .texto { 31 display: none; 32} 33 34.botao:hover .mysvg { 35 display: inline; 36} 37 38.botao:hover::after { 39 content: ""; 40 position: absolute; 41 width: 16px; 42 height: 3px; 43 background-color: rgb(59, 190, 230); 44 margin-left: -20px; 45 animation: animate 0.9s linear infinite; 46} 47 48.botao:hover::before { 49 content: ""; 50 position: absolute; 51 top: -3px; 52 left: -3px; 53 width: 100%; 54 height: 100%; 55 border: 3.5px solid transparent; 56 border-top: 3.5px solid #fff; 57 border-right: 3.5px solid #fff; 58 border-radius: 50%; 59 animation: animateC 2s linear infinite; 60} 61 62@keyframes animateC { 63 0% { 64 transform: rotate(0deg); 65 } 66 67 100% { 68 transform: rotate(360deg); 69 } 70} 71 72@keyframes animate { 73 0% { 74 transform: translateY(0); 75 } 76 77 100% { 78 transform: translateY(20px); 79 } 80} 81
191 views
Variation of abutton
MIT License