733 views
1.btn { 2 width: 140px; 3 height: 40px; 4 display: flex; 5 align-items: center; 6 justify-content: space-evenly; 7 text-transform: uppercase; 8 letter-spacing: 1px; 9 border: none; 10 position: relative; 11 background-color: transparent; 12 transition: .2s cubic-bezier(0.19, 1, 0.22, 1); 13 opacity: 0.6; 14} 15 16.btn::after { 17 content: ''; 18 border-bottom: 3px double rgb(214, 207, 113); 19 width: 0; 20 height: 100%; 21 position: absolute; 22 margin-top: -5px; 23 top: 0; 24 left: 5px; 25 visibility: hidden; 26 opacity: 1; 27 transition: .2s linear; 28} 29 30.btn .icon { 31 transform: translateX(0%); 32 transition: .2s linear; 33 animation: attention 1.2s linear infinite; 34} 35 36.btn:hover::after { 37 visibility: visible; 38 opacity: 0.7; 39 width: 90%; 40} 41 42.btn:hover { 43 letter-spacing: 2px; 44 opacity: 1; 45} 46 47.btn:hover > .icon { 48 transform: translateX(30%); 49 animation: none; 50} 51 52@keyframes attention { 53 0% { 54 transform: translateX(0%); 55 } 56 57 50% { 58 transform: translateX(30%); 59 } 60} 61
boryanakrasteva
Boryana
MIT License