Dieci Call To Action

by omni5cience

HTML

<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>

CSS

.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...

JavaScript

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;
}