Button by bociKond
#212121
1.button { 2 --clr: #DA5552; 3 --clr-white: #e3e3e3; 4 padding: .75rem 3rem; 5 border: 4px dashed var(--clr); 6 background-color: transparent; 7 color: var(--clr); 8 font-weight: bold; 9 position: relative; 10 transition: 200ms; 11 cursor: pointer; 12} 13 14.tooltip { 15 position: absolute; 16 top: calc(-100% - .75rem); 17 left: 50%; 18 transform: translateX(-50%); 19 background-color: var(--clr); 20 color: var(--clr-white); 21 padding: .5rem 2rem; 22 cursor: auto; 23 display: none; 24 animation: showTooltip 300ms ease-in-out; 25 transform-origin: bottom; 26} 27 28.tooltip::after { 29 content: ''; 30 position: absolute; 31 width: 0; 32 height: 0; 33 border-style: solid; 34 border-width: 10px 8px 0 8px; 35 border-color: var(--clr) transparent transparent transparent; 36 bottom: -9px; 37 left: 50%; 38 transform: translate(-50%); 39} 40 41.button:hover { 42 background-color: var(--clr); 43 color: var(--clr-white); 44 border-color: transparent; 45} 46 47.button:hover .tooltip { 48 display: block; 49} 50 51@keyframes showTooltip { 52 0% { 53 opacity: 0; 54 transform: scaleY(0) translateX(-50%); 55 } 56 57 100% { 58 opacity: 1; 59 transform: scaleY(1) translateX(-50%); 60 } 61}
705 views
705 views
MIT License