Button by roroland
#e8e8e8
1button { 2 --fs: 1.25em; 3 --col1: honeydew; 4 --col2: rgba(240, 128, 128, 0.603); 5 --col3: indianred; 6 --col4: maroon; 7 --pd: .5em .65em; 8 display: grid; 9 align-content: baseline; 10 appearance: none; 11 border: 0; 12 grid-template-columns: min-content 1fr; 13 padding: var(--pd); 14 font-size: var(--fs); 15 color: var(--col1); 16 background-color: var(--col3); 17 border-radius: 6px; 18 text-shadow: 1px 1px var(--col4); 19 box-shadow: inset -2px 1px 1px var(--col2), 20 inset 2px 1px 1px var(--col2); 21 position: relative; 22 transition: all .75s ease-out; 23 transform-origin: center; 24} 25 26button:hover { 27 color: var(--col4); 28 box-shadow: inset -2px 1px 1px var(--col2), 29 inset 2px 1px 1px var(--col2), 30 inset 0px -2px 20px var(--col4), 31 0px 20px 30px var(--col3), 32 0px -20px 30px var(--col2), 33 1px 2px 20px var(--col4); 34 text-shadow: 1px 1px var(--col2); 35} 36 37button:active { 38 animation: offset 1s ease-in-out infinite; 39 outline: 2px solid var(--col2); 40 outline-offset: 0; 41} 42 43button::after, 44button::before { 45 content: ''; 46 align-self: center; 47 justify-self: center; 48 height: .5em; 49 margin: 0 .5em; 50 grid-column: 1; 51 grid-row: 1; 52 opacity: 1; 53} 54 55button::after { 56 position: relative; 57 border: 2px solid var(--col4); 58 border-radius: 50%; 59 transition: all .5s ease-out; 60 height: .1em; 61 width: .1em; 62} 63 64button:hover::after { 65 border: 2px solid var(--col3); 66 transform: rotate(-120deg) translate(10%, 140%); 67} 68 69button::before { 70 border-radius: 50% 0%; 71 border: 4px solid var(--col4); 72 box-shadow: inset 1px 1px var(--col2); 73 transition: all 1s ease-out; 74 transform: rotate(45deg); 75 height: .45em; 76 width: .45em; 77} 78 79button:hover::before { 80 border-radius: 50%; 81 border: 4px solid var(--col1); 82 transform: scale(1.25) rotate(0deg); 83 animation: blink 1.5s ease-out 1s infinite alternate; 84} 85 86button:hover > span { 87 filter: contrast(150%); 88} 89 90@keyframes blink { 91 0% { 92 transform: scale(1, 1) skewX(0deg); 93 opacity: 1; 94 } 95 96 5% { 97 transform: scale(1.5, .1) skewX(10deg); 98 opacity: .5; 99 } 100 101 10%, 102 35% { 103 transform: scale(1, 1) skewX(0deg); 104 opacity: 1; 105 } 106 107 40% { 108 transform: scale(1.5, .1) skewX(10deg); 109 opacity: .25; 110 } 111 112 45%, 113 100% { 114 transform: scale(1, 1) skewX(0deg); 115 opacity: 1; 116 } 117} 118 119@keyframes offset { 120 50% { 121 outline-offset: .15em; 122 outline-color: var(--col1); 123 } 124 125 55% { 126 outline-offset: .1em; 127 transform: translateY(1px); 128 } 129 130 80%, 131 100% { 132 outline-offset: 0; 133 } 134}
944 views
944 views
MIT License