geocode buttons
by James Doyle
HTML
<div class="zoom-controls"> <a href="#">+</a>
<a href="#">-</a>
</div>
<hr>
<button class="btn-small">LAT</button>
<button class="btn-small">LNG</button>
<hr>
<button class="btn-large">Copy To Clipboard</button>
CSS
body {
font-family:'Edmondsans';
background: #2b2e31;
-webkit-font-smoothing: antialiased;
}
*, *:before, *:after {
box-sizing: border-box;
}
.zoom-controls {
height: 69px;
width: 34px;
border: 1px solid #212325;
border-radius: 6px;
font-size: 1.5em;
text-align: center;
color: #e2e4e4;
background: linear-gradient(135deg, #575e62 0%, #3a3f42 100%);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
}
.zoom-controls a {
text-decoration: none;
color: #e2e4e4;
display: block;
padding: 0 0 4px 0;
background: rgba(120, 120, 120, 0);
border-radius: 0 0 6px 6px;
vertical-align: middle;
transition: all 0.2s ease;
}
.zoom-controls a:hover {
color: white;
background: rgba(255, 255, 255, 0.05);
}
.zoom-controls a:active {
color: #222;
background: rgba(0, 0, 0, 0.1);
}
.zoom-controls a:first-child {
padding: 2px 0 0 0;
border-radius: 6px 6px 0 0;
border-bottom: 1px solid #212325;
}
.btn-small {
border: 1px solid #212325;
outline: none;
color: #ddd;
cursor: pointer;
font-size: 1em;
font-family: inherit;
padding: 0.6em 1em;
border-radius: 6px;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: linear-gradient(135deg, #3a3f42 0%, #383d40 100%);
transition: all 0.2s ease;
}
.btn-small:active {
color: #aaa;
border: 1px solid #111;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0), inset 0 0 4px rgba(0, 0, 0, 0.5);
}
.btn-large {
border: 1px solid #212325;
outline: none;
color: #e2e4e4;
cursor: pointer;
font-size: 0.9em;
font-family: inherit;
padding: 1em 1.8em;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 #246596, 0 1px 1px rgba(0, 0, 0, 0.2);
background: linear-gradient(to bottom, #4a90db 0%, #215a88 100%);
transition: all 0.2s ease;
}
.btn-large:active {
color: #222;
box-shadow: inset 0 1px 0 #11446c,...