<button class="yt" role="button">The Button Look like this</button>
<select class="button">
<option value="volvo">San2-dey.blogspot.com</option> 
  <option value="volvo">Youtube</option>
  <option value="saab">Blogsopt.com</option>
</select>
<style type="text/css">
.yt{
   border: 1px solid #DDD;
   border-radius: 3px;
   text-shadow: 0 1px 1px white;//
   -webkit-box-shadow: 0 1px 1px #fff;//This is for shadow in Button
   -moz-box-shadow:    0 1px 1px #fff;
   box-shadow:         0 1px 1px #fff;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
}
.yt:hover, .yt:focus {
   border-color: #999;
   background: -webkit-linear-gradient(top, white, #E0E0E0);
   background:    -moz-linear-gradient(top, white, #E0E0E0);
   background:     -ms-linear-gradient(top, white, #E0E0E0);
   background:      -o-linear-gradient(top, white, #E0E0E0);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.yt:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   -webkit-box-shadow: inset 0 1px 2px #aaa;
   -moz-box-shadow:    inset 0 1px 2px #aaa;
   box-shadow:         inset 0 1px 2px #aaa;
   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
   background:    -moz-linear-gradient(top, #E6E6E6, gainsboro);
   background:     -ms-linear-gradient(top, #E6E6E6, gainsboro);
   background:      -o-linear-gradient(top, #E6E6E6, gainsboro);
}
</style>

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript">

</script>

<div id="san" Style="Height:500px;Width:500px;">San2.yed@gmail.com</div>

<script>
      var initialLocation;
      var siberia = new google.maps.LatLng(30.250371, 77.0416247);
      var MMU = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
      var map;
      var infowindow = new google.maps.InfoWindow();
      var mapOptions = {
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, onError);
        // also monitor position as it changes
        navigator.geolocation.watchPosition(showPosition);
      } else {
        onError();
      }
      
      function showPosition(position) {
        map = new google.maps.Map(document.getElementById("san"), mapOptions);
        
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        
        initialLocation = new google.maps.LatLng(lat, lng);
        map.setCenter(initialLocation);
        infowindow.setContent(lat + " " + lng);
        infowindow.setPosition(initialLocation);
        infowindow.open(map);
      }
      
      function onError() {
        if (navigator.geolocation) {
          initialLocation = MMU;
          contentString = "Error: The Geolocation service failed.";
        } else {
          initialLocation = siberia;
          contentString = "Your browser doesn't support geolocation.";
        }
        mapOptions.zoom = 4;
        map = new google.maps.Map(document.getElementById("san"), mapOptions);
        map.setCenter(initialLocation);
        infowindow.setContent(contentString);
        infowindow.setPosition(initialLocation);
        infowindow.open(map);
      }
    </script>