document.getElementsByClassName("get-yours")[0].onclick = function(e){ document.body.className = "call-to-action"; }; document.getElementsByClassName("submit")[0].onclick = function(e){ document.body.className = "ad"; return false; }
<section class="button"> <button class="get-yours"><span class="first-line">Click Here to</span><span class="second-line">Get Yours</span></button> </section> <section class="form"> <form action=""> <h1>Have someone call me:</h1> <label>My phone number is <input type="tel"></input> </label> <input type="submit" class="submit"></input> </form> </section>
.ad .form { display: none; } .call-to-action .button { display: none; } body.call-to-action { background-color: white; } .get-yours { position: absolute; right: 5%; top: 35%; text-transform: uppercase; font-family: serif; font-size: 18px; } .get-yours span { display: block; } .first-line { font-size: 18px; } .second-line { font-size: 32px; } button.get-yours { background-color: #eeeeee; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); background-image: linear-gradient(top, #eeeeee, #cccccc); border: 1px solid #ccc; border-bottom: 1px solid #bbb; border-radius: 8px; color: #333; font: bold 18px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; padding: 8px 1em; text-align: center; text-shadow: 0 1px 0 #eee; /*width: 150px;*/ } button.get-yours:hover { background-color: #dddddd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb)); background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); background-image: linear-gradient(top, #dddddd, #bbbbbb); border: 1px solid #bbb; border-bottom: 1px solid #999; cursor: pointer; text-shadow: 0 1px 0 #ddd; } button.get-yours:active { border: 1px solid #aaa; border-bottom: 1px solid #888; -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; } @media only screen and (max-width : 510px) { .first-line { font-size: 16px; } .second-line { font-size: 26px; } }