Button by absoluteSTrange
#e8e8e8
1.button { 2 --width: 100px; 3 --height: 25px; 4 --button-color: #0059ff; 5 width: var(--width); 6 height: var(--height); 7 background: var(--button-color); 8 position: relative; 9 text-align: center; 10 border-radius: 30px; 11 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 12 text-decoration: solid; 13 transition: background box-shadow 0.3s; 14 -webkit-box-shadow: 4px 8px 19px -3px #0059ff; 15 box-shadow: 0px 0px 20px -3px #0059ff; 16 text-shadow: 0 0 .4em rgb(255, 255, 255); 17} 18 19.button::before { 20 position: absolute; 21 content: attr(data-tooltip); 22 background-color: var(--button-color); 23 font-size: 0.9rem; 24 color: #111; 25} 26 27.button::after { 28 position: absolute; 29 content: ''; 30 width: 0; 31 height: 0; 32 border: 10px solid transparent; 33 border-top-color: var(--button-color); 34} 35 36.button::after,.button::before { 37 opacity: 0; 38 visibility: hidden; 39 transition: all 0.5s; 40} 41 42.text { 43 display: flex; 44 align-items: center; 45 justify-content: center; 46} 47 48.button-wrapper,.text,.icon { 49 overflow: hidden; 50 position: absolute; 51 width: 100%; 52 height: 100%; 53 left: 0; 54 color: #fff; 55} 56 57.text { 58 top: 0 59} 60 61.text,.icon { 62 transition: top 0.45s; 63} 64 65.icon { 66 color: #fff; 67 top: 100%; 68 display: flex; 69 align-items: center; 70 justify-content: center; 71} 72 73.button:hover { 74 background: #4586ff; 75 box-shadow: 0px 0px 20px -3px #4586ff; 76} 77 78.button:hover .text { 79 top: -100%; 80} 81 82.button:hover .icon { 83 top: 0; 84} 85 86 87 88
819 views
819 views
MIT License