Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 18, 2017 09:46
Show Gist options
  • Save anonymous/59bf4ec90024216ffd3d47f5522aa7f2 to your computer and use it in GitHub Desktop.
Save anonymous/59bf4ec90024216ffd3d47f5522aa7f2 to your computer and use it in GitHub Desktop.
Download ZIP
Demo by Roko C.B. // source http://jsbin.com/bomuvecugo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="_so/js?" id="so"></script>
<meta charset="utf-8">
<title>Demo by Roko C.B.</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<style id="jsbin-css">
[data-ribbon]{
position:relative;
display1:inline-block;
padding1:8px 10px;
background:#FF7700;
text-align:center;
color:#fff;
text-decoration: none;
}
[data-ribbon]:after{
content: attr(data-ribbon);
position:absolute;
top: 4px;
left:-12px;
color: #000;
height:0;
border-bottom: 8px solid gold;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
transform: rotate(-45deg);
font-size:7px
}
</style>
</head>
<body>
<br><br><br>
<button class="btn btn-sm" data-ribbon="FREE">
<i class="fa fa-stop"></i>
</button>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"><\/script>
<script src="_so/js?" id="so"><\/script>
<meta charset="utf-8">
<title>Demo by Roko C.B.</title>
<script src="https://code.jquery.com/jquery.min.js"><\/script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"><\/script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br><br><br>
<button class="btn btn-sm" data-ribbon="FREE">
<i class="fa fa-stop"></i>
</button>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">[data-ribbon]{
position:relative;
display1:inline-block;
padding1:8px 10px;
background:#FF7700;
text-align:center;
color:#fff;
text-decoration: none;
}
[data-ribbon]:after{
content: attr(data-ribbon);
position:absolute;
top: 4px;
left:-12px;
color: #000;
height:0;
border-bottom: 8px solid gold;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
transform: rotate(-45deg);
font-size:7px
}</script>
</body>
</html>
Raw
jsbin.bomuvecugo.css
[data-ribbon]{
position:relative;
display1:inline-block;
padding1:8px 10px;
background:#FF7700;
text-align:center;
color:#fff;
text-decoration: none;
}
[data-ribbon]:after{
content: attr(data-ribbon);
position:absolute;
top: 4px;
left:-12px;
color: #000;
height:0;
border-bottom: 8px solid gold;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
transform: rotate(-45deg);
font-size:7px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment