Button by Tsiangana
#212121
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: rgb(47,93,197); 9 background: linear-gradient(160deg, rgba(47,93,197,1) 0%, rgba(46,86,194,1) 5%, rgba(47,93,197,1) 11%, rgba(59,190,230,1) 57%, rgba(0,212,255,1) 71%); 10 color: #fff; 11 font-family: Roboto, sans-serif; 12 font-weight: 505; 13 font-size: 16px; 14 line-height: 1; 15 cursor: pointer; 16 filter: drop-shadow(0 0 10px rgba(59, 190, 230, 0.568)); 17 transition: .5s linear; 18} 19 20.botao .mysvg { 21 display: none; 22} 23 24.botao:hover { 25 width: 50px; 26 height: 50px; 27 border-radius: 50%; 28 transition: .5s linear; 29} 30 31.botao:hover .texto { 32 display: none; 33} 34 35.botao:hover .mysvg { 36 display: inline; 37} 38 39.botao:hover::before { 40 content: ''; 41 position: absolute; 42 top: -3px; 43 left: -3px; 44 width: 100%; 45 height: 100%; 46 border: 3.5px solid transparent; 47 border-top: 3.5px solid #fff; 48 border-right: 3.5px solid #fff; 49 border-radius: 50%; 50 animation: animateC 2s linear infinite; 51} 52 53@keyframes animateC { 54 0% { 55 transform: rotate(0deg); 56 } 57 58 100% { 59 transform: rotate(360deg); 60 } 61} 62
1.1K views
1.1K views
MIT License