<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container text-center">
<h1 class="h3 page-header text-left">Gradient button svg - <small>Css + javascript</small></h1>
<div class="row">
<div class="col-md-3">
<div class="panel card">
<div class="panel-body">
<img class="img-circle img-thumbnail" alt="140x140" src="http://outils.vision-design.fr/pens/gradient_buttons/assets/img/a.jpg">
<h4>Lorem ipsum</h4>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisi ipsum, tempus in sapien nec, eleifend lobortis quam. Nullam eget mi vel lorem suscipit accumsan sit amet non ex.</p>
<button type="button" class="btn-svg">Fly over me...</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel card">
<div class="panel-body">
<img class="img-circle img-thumbnail" alt="140x140" src="http://outils.vision-design.fr/pens/gradient_buttons/assets/img/b.jpg">
<h4>Lorem ipsum</h4>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisi ipsum, tempus in sapien nec, eleifend lobortis quam. Nullam eget mi vel lorem suscipit accumsan sit amet non ex.</p>
<button type="button" class="btn-svg">Fly over me...</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel card">
<div class="panel-body">
<img class="img-circle img-thumbnail" alt="140x140" src="http://outils.vision-design.fr/pens/gradient_buttons/assets/img/c.jpg">
<h4>Lorem ipsum</h4>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisi ipsum, tempus in sapien nec, eleifend lobortis quam. Nullam eget mi vel lorem suscipit accumsan sit amet non ex.</p>
<button type="button" class="btn-svg">Fly over me...</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel card">
<div class="panel-body">
<img class="img-circle img-thumbnail" alt="140x140" src="http://outils.vision-design.fr/pens/gradient_buttons/assets/img/d.jpg">
<h4>Lorem ipsum</h4>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisi ipsum, tempus in sapien nec, eleifend lobortis quam. Nullam eget mi vel lorem suscipit accumsan sit amet non ex.</p>
<button type="button" class="btn-svg">Fly over me...</button>
</div>
</div>
</div>
</div>
</div>
/* demo styles */
body{
background-color:#fff;
text-align:center;
font-family:"Open Sans",sans-serif;
background-color: #eee;
color: #3c4858;
}
.container > h1{
margin-bottom: 30px;
}
.container .card{
border-radius: 6px;
border: none;
padding-top:75px;
position:relative;
top:85px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.container .card p{
margin-bottom: 30px;
}
.container .card img{
margin: 0 auto;
padding:4px;
border:0px solid #fff;
width:150px;
height: 150px;
display:inline-block;
position:absolute;
top:0;
left:50%;
transform:translate(-50%, -75px);
box-shadow: 0 2px 5px 0 rgba(156, 39, 176, 0.14), 0 1px 5px -2px rgba(156, 39, 176, 0.2), 0 2px 5px 0 rgba(156, 39, 176, 0.15);
background: linear-gradient(to right, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #22c1c3);
background-size: 200% 100%;
background: #fff;
}
/* end demo styles */
.btn-svg{
position:relative;
display:inline-block;
border-radius:50%;
background:#fff;
box-sizing: content-box;
border:none;
outline:none;
padding: 4px 10px;
}
.btn-svg:hover{
cursor:pointer;
}
.btn-svg svg{
border-radius: 30px;
}
.btn-svg [id*="btn-svg-block"]{
padding: 3px;
position:absolute;
z-index:1;
background: linear-gradient(to right, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #22c1c3);
background-color: #333;
background-size: 200% 100%;
background-position: 0% 0%;
height : 100%;
width: 100%;
display:block;
box-sizing: border-box;
transition: background-position 1s, box-shadow 350ms cubic-bezier(0.4, 0, 1, 1);
text-align:center;
left:0;
top:0;
border-radius:30px;
box-shadow: 0 2px 5px 0 rgba(156, 39, 176, 0.14), 0 1px 5px -2px rgba(156, 39, 176, 0.2), 0 2px 5px 0 rgba(156, 39, 176, 0.15);
}
.btn-svg:hover [id*="btn-svg-block"],
.btn-svg:focus [id*="btn-svg-block"],
.btn-svg:active [id*="btn-svg-block"],
.btn-svg.active [id*="btn-svg-block"]{
background-position: 99% 0%;
box-shadow: 0 14px 26px -12px rgba(156, 39, 176, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(156, 39, 176, 0.2);
}
.btn-svg [id*="btn-svg-block"] [id*="btn-svg-text"]{
font-family:"Open Sans",sans-serif;
font-size:16px;
font-weight: 400;
fill-opacity:1;
text-transform: uppercase;
alignment-baseline: middle;
text-anchor:middle;
}
.btn-svg span{
font-family:"Open Sans",sans-serif;
font-size:16px;
font-weight: 400;
text-transform: uppercase;
text-align:center;
display:block;
position:relative;
z-index:-1;
padding:10px 20px;
opacity:0;
}
//
function getSvgHtml(id, label){
var svg = '<div id="btn-svg-block-'+ id +'">' +
'<svg width="100%" height="100%">' +
'<defs>' +
'<mask id="btn-svg-mask-'+ id +'">' +
'<rect width="100%" height="100%" fill="#fff" />' +
'<text x="50%" y="65%" id="btn-svg-text-'+ id +'" fill="#000" alignment-baseline="middle" text-anchor="middle">'+ label +'</text>' +
'</mask>' +
'</defs>' +
'<rect id="btn-svg-rect-'+ id +'" x="0" y="0" width="100%" height="100%" mask="url(#btn-svg-mask-'+ id +')" fill="#fff" rx="10%" ry="100%" />' +
'</svg>' +
'</div>' +
'<span>'+ label +'</span>';
return svg;
}
function setSvgMaskButton(target){
var obj = $(target),
is_obj = (obj.length > 0)? true : false,
id = 0;
if(is_obj){
obj.each(function() {
id ++;
var text = $(this).text(),
btn_id = $(this).attr('id'),
tag_name = $(this).prop("tagName").toLowerCase(),
html = getSvgHtml(id, text);
console.error(text);
$(this).html(html);
});
}
}
$(document).ready(function() {
setSvgMaskButton('.btn-svg');
});
