#e8e8e8
1.animated-button { 2 position: relative; 3 display: inline-block; 4 padding: 16px 28px; 5 font-size: 20px; 6 font-weight: bold; 7 text-transform: uppercase; 8 color: #fff; 9 text-align: center; 10 text-decoration: none; 11 background-color: #1f347b; 12 /* border-radius: 40px; */ 13 overflow: hidden; 14 border: none; 15 z-index: 1; 16} 17 18.animated-button:before { 19 transition: 1s; 20 content: ""; 21 position: absolute; 22 top: 50%; 23 left: 50%; 24 width: 0; 25 height: 0; 26 background-color: #fff; 27 border-radius: 50%; 28 opacity: 0; 29 transform: translate(-50%, -50%); 30 z-index: -1; 31} 32 33.animated-button:hover:before { 34 width: 300px; 35 height: 300px; 36 opacity: 0.4; 37 transition: all 0.5s ease-out; 38} 39 40.animated-button:hover { 41 background-color: #fff; 42 color: #202960; 43 transition: all 0.5s ease-out; 44} 45 46.animated-button:hover:after { 47 content: ""; 48 position: absolute; 49 top: 50%; 50 left: 50%; 51 width: 0; 52 height: 0; 53 background-color: #255ea4; 54 border-radius: 50%; 55 transform: translate(-50%, -50%); 56 z-index: -2; 57 animation: pulse 2s infinite; 58} 59 60@keyframes pulse { 61 0% { 62 width: 0; 63 height: 0; 64 opacity: 0.5; 65 } 66 67 100% { 68 width: 200px; 69 height: 200px; 70 opacity: 0; 71 } 72} 73
Variation of abutton
Variation of abutton