Skip to content

Instantly share code, notes, and snippets.

@mscalora

mscalora/svg-ribbon.html

Created August 11, 2017 17:29
Show Gist options
  • Save mscalora/ad1e825c3d3fe2dc3aae77c73b6b88ad to your computer and use it in GitHub Desktop.
Save mscalora/ad1e825c3d3fe2dc3aae77c73b6b88ad to your computer and use it in GitHub Desktop.
Download ZIP
Using svg to implement a ribbon button with css and an svg element
Raw
svg-ribbon.html
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="//scalora.net/ticon.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="page container">
<h3 style="padding-bottom: 0.5in;">SVG Ribbon</h3>
<div class="row">
<div class="col-md-3">
<style>
.ribbon,
.ribbon svg {
width: 100px;
height: 38px;
position: relative;
cursor: default;
user-select: none;
transition: color 250ms;
}
.ribbon svg path {
stroke: #4EBB82;
stroke-width: 2px;
fill: none;
transition: fill,stroke 250ms, 250ms;
}
.ribbon.picked:hover svg path,
.ribbon:hover svg path {
fill: #5bd996;
stroke: #5bd996;
}
.ribbon.picked svg path {
fill: #4EBB82;
stroke: #4EBB82;
}
.ribbon-text {
color: #444;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
font-family: sans-serif;
font-size: 11px;
font-weight: 900;
padding-top: 6px;
color: #4EBB82;
}
.ribbon.picked .ribbon-text,
.ribbon:hover .ribbon-text {
color: #fff;
}
.ribbon:active .ribbon-text {
color: #63e69e;
}
</style>
<div class="ribbon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 38" enable-background="new 0 0 100 38" xml:space="preserve">
<path d="M2,2 L2,36 L50,24 L98,36 L98,2 Z"/>
</svg>
<div class="ribbon-text">EDITOR'S PICK</div>
</div>
</div>
</div>
</div>
<script>
$('.ribbon').on('click', function () {
$('.ribbon').toggleClass('picked');
return false;
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment