div {
    color: white;
}

div img {
    width: 70%;
    margin: 5% 15%;
}


/*
* 	BIG Jelly Button
*		Original source from Mathias Adam:
*				- https://dribbble.com/shots/6209185-BIG-Jelly-Button
*
*		I tried to stay as true to the original source as possible.
*		Unforutunately there were a few effects I couldn't make 
*		happen with CSS. Primarily the suble noise texture. I 
*		considered using a base64 encoded noise pattern overlay but
*		I felt like that was cheating. I also couldn't do the
*		true bevel effect on the label since CSS doesn't have an
*		inset text shadow option. 
*/

body {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-image: linear-gradient(135deg, #0042D9 0%, #0093FF 60%, #0078FF 100%);
}

button {
    cursor: pointer;
    position: relative;
    border-radius: 3.75rem;
    line-height: 2.5rem;
    border: 1px solid #066b02;
    background-image: linear-gradient(-180deg, #21e40f 0%, #29b606 100%);
    box-shadow: 0 1rem 1.25rem 0 rgba(16, 148, 27, 0.5), 0 -0.25rem 1.5rem rgb(16, 231, 88) inset, 0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset, 0 0.25rem 0.5rem 0 rgb(12, 150, 65) inset;
}

button::before {
    content: "";
    display: block;
    height: 0.25rem;
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 7.5rem);
    background: #fff;
    border-radius: 100%;
    opacity: 0.7;
    background-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0.00) 100%);
}

button::after {
    content: "";
    display: block;
    height: 0.25rem;
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 7.5rem);
    background: #fff;
    border-radius: 100%;
    filter: blur(1px);
    opacity: 0.05;
    background-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0.00) 100%);
}