Button by ryota1231
#212121
1.animated-button { 2 position: relative; 3 display: flex; 4 align-items: center; 5 gap: 4px; 6 padding: 16px 36px; 7 border: 4px solid; 8 border-color: transparent; 9 font-size: 16px; 10 background-color: ; 11 border-radius: 100px; 12 font-weight: 600; 13 color: #1f387e; 14 box-shadow: 0 0 0 2px #ffffff; 15 cursor: pointer; 16 overflow: hidden; 17 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); 18} 19 20.animated-button svg { 21 position: absolute; 22 width: 24px; 23 fill: #1f387e; 24 z-index: 9; 25 transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); 26} 27 28.animated-button .arr-1 { 29 right: 16px; 30} 31 32.animated-button .arr-2 { 33 left: -25%; 34} 35 36.animated-button .circle { 37 position: absolute; 38 top: 50%; 39 left: 50%; 40 transform: translate(-50%, -50%); 41 width: 20px; 42 height: 20px; 43 background-color: #c5e5e4; 44 border-radius: 50%; 45 opacity: 0; 46 transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); 47} 48 49.animated-button .text { 50 position: relative; 51 z-index: 1; 52 transform: translateX(-12px); 53 transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); 54} 55 56.animated-button:hover { 57 box-shadow: 0 0 0 12px transparent; 58 color: #212121; 59 border-radius: 12px; 60} 61 62.animated-button:hover .arr-1 { 63 right: -25%; 64} 65 66.animated-button:hover .arr-2 { 67 left: 16px; 68} 69 70.animated-button:hover .text { 71 transform: translateX(12px); 72} 73 74.animated-button:hover svg { 75 fill: #1f387e; 76} 77 78.animated-button:active { 79 scale: 0.95; 80 box-shadow: 0 0 0 4px greenyellow; 81} 82 83.animated-button:hover .circle { 84 width: 220px; 85 height: 220px; 86 opacity: 1; 87} 88
1.4K views
Variation of abutton
MIT License