Skip to content

Instantly share code, notes, and snippets.

@Kadajett
Created May 3, 2014 10:07
Show Gist options
  • Select an option

  • Save Kadajett/11495173 to your computer and use it in GitHub Desktop.

Select an option

Save Kadajett/11495173 to your computer and use it in GitHub Desktop.
Buttons for CompendiumJs
body{
background-color: black;
}
.btn{
border-radius: 8px;
}
.sexyButton{
}
.sexyButton:focus, .sexyButton:active, .sexyButton:focus:active{
border: none;
outline: none;
}
.sexyButton i{
color: #E6324B;
font-size: 18px;
font-weight: 900;
-webkit-text-stroke-width: 0.01em;
-webkit-text-stroke-color: #9E1E4C;
}
.readButton{
}
.readButton:focus, .readButton:active, .readButton:focus:active{
border: none;
outline: none;
}
.readButton:visited > *{
color: black !important;
}
.readButton i{
color: #78B3A4;
font-size: 19px;
font-weight: 900;
-webkit-text-stroke-width: 0.01em;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="compendiumButtons" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<br />
<button class="readButton btn btn-default">
<i class="fa fa-link">&nbsp; Link</i>
</button>
<button class="sexyButton btn btn-default">
<i class="fa fa-heart">&nbsp; Relevant</i>
</button>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment