JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Christmas Button</title>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bg">
<div class="centerer">
<a href="#" class="button">Christmas Button</a>
</div>
</div>
</body>
</html>

CSS

body { margin: 0; }
.button {
display: inline-block;
-webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
        box-sizing:border-box;
min-width:100px;
padding: 22px 33px;
font-family: 'Lobster', cursive;
font-size: 26px;
line-height: 26px;
text-decoration: none;
color: #FFF;
text-shadow: 0 1px 2px rgba(0,0,0,0.75);
background: #5e0d0c;
outline: none;
border-radius: 15px;
border: 1px solid #4c0300;
box-shadow:
inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
inset 0 0 6px #a23227, /* inner glow */
inset 0 80px 80px -40px #ac3223, /* gradient */
1px 1px 3px rgba(0,0,0,0.75); /* shadow */

position: relative;
overflow: visible; /* IE9 & 10 */
-webkit-transition: 500ms linear;
   -moz-transition: 500ms linear;
     -o-transition: 500ms linear;
transition: 500ms linear;
}

.button::before {
content: '';
display: block;
position: absolute;
top: -7px;
left: -3px;
right: 0;
height: 23px;
background:...

JavaScript

//https://codemyui.com/christmas-button-with-some-snow-on-top/