.highlight{ color:rgba(255, 168, 0, 1); } .highlight-bg{ background-color: white; color: black; border: 1px; border-color: black; box-shadow: 5px 5px 0px 0px rgba(255, 168, 0, 1); } .light{ background: -webkit-linear-gradient(180deg, #FFC800 0%, #01F7F7 85%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn{ background-image: linear-gradient(130deg, #FFC800 0%, #afff3d 100%); !important; border-radius: 10px 10px 10px 10px; box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.5); padding: 2px 2px 2px 2px; -webkit-animation: animatedgradient 3s ease infinite alternate; animation: animatedgradient 3s ease infinite alternate; } @keyframes animatedgradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 75% { background-position: 0% 50%; } 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); }30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .checkmark { display: block; width: 30px; height: 30px; background-color: #ddd; border-radius: 4px; position: relative; transition: background-color 0.4s; overflow: hidden; cursor: pointer; } #check:checked ~ .checkmark { background-color: #E99320; } .checkmark::after { content: ""; position: absolute; width: 7px; height: 15px; border-right: 3px solid #2d2d2d; border-bottom: 3px solid #2d2d2d; top: 44%; left: 50%; transform: translate(-50%, -50%) rotateZ(40deg) scale(10); opacity: 0; transition: all 0.4s; } #check:checked ~ .checkmark::after { opacity: 1; transform: translate(-50%, -50%) rotateZ(40deg) scale(1); } input.checkbox { width: 25px; height: 25px; vertical-align: middle; }