CodePen

HTML

            
              <address class="cf">
  <span id="add-1">Empire State Building</span>
  <span id="add-2">Manhattan</span>
  <span id="add-3">New York City</span>
  <span id="add-4">NY</span>
</address>

<button class="button"><a target="blank">Search</a></button>

<span id="search">Searching for: </span>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              address {
  width:200px;
  background:lightgrey;
  margin:10px;
}

.cf:after {
  content: "";
  display: table;
  clear: both;
}

span {
  margin:10px;
  float:left;
  clear:left;
}

a{
  text-decoration:none;
  color:black;
  font-weight:bold;
  text-shadow:2px 2px white;
}


button {
  margin:10px;
  padding:10px 20px;
  border-radius:5px;
  background:lightgrey;
  display:block;
  box-shadow:1px 2px 2px black; 
}

button:hover {
  box-shadow:1px 1px 2px black; 
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
	var add1 = $('#add-1').text();
	var add2 = $('#add-2').text();
	var add3 = $('#add-3').text();
	var add4 = $('#add-4').text();
  var search = (add1)+" "+(add2)+" "+(add3)+" "+(add4);
  var link = "http://maps.google.com/maps?q=" + search;

  (function (){

  $('#search').append(search);
	$("button a").attr("href", link);	

})();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................