caniuse mock 2

by AaronLayton

HTML

<h1>Awesome HTML5 + WebGL Demo</h1>

<p>Yup this is an awesome HTML5 + WebGL demo that you will only be able to see if you use the browser I affiliate with!</p>
<p>You absolutely <em>must</em> get browser X as it has a pretty icon and it is the only browser the supports everything you need, honestly there is no other browser that will do the job</p>
<p>Wait there is another solution... I could just include the handy caniuse helper js and let you make your own damn descision</p>
<p>&nbsp;</p>

<div class="btnCaniuse">
    <div class="browsersList">
        <a class="supportedBrowser" href="#link" title="Chrome 18">
            <span class="browser chrome"></span>
        </a>
        <a class="supportedBrowser" href="#link" title="Firefox 11">
            <span class="browser firefox"></span>
        </a>
        <a class="supportedBrowser" href="#link" title="Opera 12">
            <span class="browser opera"></span>
        </a>
        <a class="supportedBrowser" href="#link" title="Safari 6">
            <span class="browser safari"></span>
        </a>
        <a class="supportedBrowser" href="#link"  title="Internet Explorer 10">
            <span class="browser ie"></span>
        </a>
    </div>
    
    <p>
        <span class="support">This demo is not fully supported</span>
        Upgrade your browser, choose from above
    </p>

    
    
    <div class="hoverInfo">
        <div class="neededFeatures">
            <h6>Needed features</h6>
            <a href="http://caniuse.com/#search=canvas">Canvas</a>, <a href="http://caniuse.com/#search=webgl">WebGL</a>, <a href="http://caniuse.com/#search=text-shadow">Text-Shadow</a>
        </div>
    </div>
</div>




<div style="float:right;">
    <div class="btnCaniuse bcSmall">
        <div class="caniuseLogo"></div>
        <p>
            <span class="support">This demo is not fully supported</span>
            Upgrade your browser, hover for suggestions
        </p>
        
        <div...

CSS

body { 
    background:url(http://jootix.com/upload/DesktopWallpapers/cache/Wood-Texture-wood-texture-1920x1200.jpg);
    color:#fff;
    font-family: Helvetica, Arial, sans-serif;
    padding:30px;
    text-shadow: 1px 1px 3px #000;
}

.btnCaniuse {
    background-color:#e0e0e0;
    cursor:pointer;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#666666;
    border: solid 1px #cbcbcb;
    
    background-image: linear-gradient(bottom, #e0e0e0 0%, #f5f5f5 100%);
    background-image: -o-linear-gradient(bottom, #e0e0e0 0%, #f5f5f5 100%);
    background-image: -moz-linear-gradient(bottom, #e0e0e0 0%, #f5f5f5 100%);
    background-image: -webkit-linear-gradient(bottom, #e0e0e0 0%, #f5f5f5 100%);
    background-image: -ms-linear-gradient(bottom, #e0e0e0 0%, #f5f5f5 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #e0e0e0),
        color-stop(1, #f5f5f5)
    );
    
    -webkit-box-shadow: inset 0px 1px 0px #fff;
    -moz-box-shadow: inset 0px 1px 0px #fff;
    box-shadow: inset 0px 1px 0px #fff;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    
    text-shadow: 1px 1px 3px #fff;
    
    float:left;
    min-width:215px;
    max-width:300px;
    
    position:relative;
}
.bcSmall { width:300px }

.btnCaniuse a {
    color:#666666;
    text-decoration:none;
    text-shadow: 1px 1px 3px #fff;
}
.btnCaniuse p {margin:0;text-align:center; }
.bcSmall p { text-align:left; }
.btnCaniuse span.support {
    display:block;
    font-size:10px;  
}
.btnCaniuse:hover {
    background-color:#f5f5f5;
    background-image: linear-gradient(bottom, #eaeaea 0%, #f8f8f8 100%);
    background-image: -o-linear-gradient(bottom, #eaeaea 0%, #f8f8f8 100%);
    background-image: -moz-linear-gradient(bottom, #eaeaea 0%, #f8f8f8 100%);
    background-image:...

JavaScript

// This would have a javascript file that can be called and the button will be put onto the website