Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <a href="#" class="btn-link">
    <div class="shell blue">
      <span class="main">Main Text</span>
      <span class="sub">Sub Text</span>
    </div>
  </a>
  
</body>
</html>
 
.btn-link {
    background-color: red;
    clear: both;
    display: block;
    text-decoration: none;
    width: 100%;
}
​
.btn-link:active { padding-top: 4px; }
​
.btn-link .shell {
    border-bottom-style: solid;
    border-bottom-width: 8px;
    letter-spacing: .1em;
    padding: .9em 0;
    text-align: center;
    width: inherit;
}
.btn-link:active .shell { border-bottom-width: 4px; }
.btn-link .shell .main {
    font-family: "Oswald", Helvetica, sans-serif;
    font-size: 1.6em;
    font-weight: 300;
    margin: 0 0 .2em;
}
.btn-link .shell .sub {
    display: block;
    font-family: "Helvetica", Helvetica, sans-serif;
    font-size: .9em;
    font-weight: 100;
    margin: 0;
}
​
.btn-link .shell.blue {
    background-color:#999;
    border-bottom-color: #333;
}
.btn-link:hover .shell.blue { background-color:#888; }
.btn-link .shell.blue span { color: #FFF; }
 
$('.btn-link, .shell, .main, .sub').click(function(e) {
  e.preventDefault();
  console.log($(this).attr('class') + ' clicked');
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers