Wave button background

by paullferguson

HTML

<a href="#"><b>Hello</b></a>

CSS

body { padding: 50px;}


a {
    font-family: sans-serif;
    font-size: 10vw;
    display: block;
    padding: 0.25em 1.5em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #ffd529;
    box-shadow: 0 -1px 0 2px #fee99a , inset 0 0 18px 1px rgba(255, 255, 255, 0.3);
    
    /* This chap is v usefull http://glan.github.com/CSS-Patterns-Workbench */
    
    background:-webkit-radial-gradient(15% 20%, #FFEB66 0, #FFEB66 40%, transparent 40%, transparent),
               -webkit-radial-gradient(85% 80%, #FFDE00 0, #FFDE00 40%, transparent 40%, transparent),
               -webkit-linear-gradient(#FFEB66, #FFEB66 50%, #FFDE00 50%, #FFDE00) 0 0;
    
    background-size: 100% 100%;
    background-repeat:no-repeat;
    
    -webkit-transition: border .1s ease-out;
}

a b {
    background: none;
    background:-webkit-linear-gradient(top, #B20A0A 0%, #B20A0A 100%);
    -webkit-text-stroke: 0;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-shadow: rgba(255,255,255,0.3 ) 0 3px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
    -webkit-transition: text-shadow .1s ease-out;
}

a:hover { border: 2px solid #ffb629;}
a:hover b { text-shadow: rgba(255,255,255,0.2 ) 0 3px 6px, rgba(255,255,255,0.1) 1px 3px 3px;}