JSFiddle - React, Tailwind, and code Playground

by vaff

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>button test</title>
    </head>
    <body>
        <a href="#">
            <span>&gt;</span>
            <h1>En lille bitte tekst test</h1>
        </a>
    </body>
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Megrim); /* > */
@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis); /* brødtekst */


a {
    text-decoration: none;
    color: #bad;
    font-family: 'Terminal Dosis', sans-serif;     
}

a:hover {
    color:#000;
}

    a span {
        background :#bad;
        
        text-align: center;
        vertical-align: middle; 
        
        padding: 5px 18px;
        margin: 10px;
        float: left;
        
        font-family: 'Megrim', cursive;
        font-size: 35px;
        font-weight: normal;
        color: #fff;
        
    -webkit-border-radius: 40px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
       -moz-border-radius: 40px; /* FF1-3.6 */
            border-radius: 40px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    
        /* useful if you don't want a bg color from leaking outside the border: */        
       -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
    }
    
    a:hover span {
        padding: 10px 21px;
        margin: 8px;
        
        font-size: 30px;        
    }
    
    a h1 {
        float: left;
        margin-left: 8px;
        height: 70px;
        padding-top: 23px;
    }