Result
SVGを使ってあります
css
.btn {
position: relative;
display: inline-block;
width: 166px;
height: 45px;
font-size: 14px;
line-height: 45px;
text-align: center;
color: #ffffff;
cursor: pointer;
overflow: hidden;
}
.btn svg {
position: absolute;
top: 0;
left: 0;
}
.btn svg rect {
stroke: #ffffff;
stroke-width: 6;
stroke-dasharray: 422, 0;
stroke-dashoffset: 0;
transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:hover svg rect {
stroke-width: 10;
stroke-dasharray: 110, 312;
stroke-dashoffset: 183;
}
|
html
<div class="btn">
<svg>
<rect x="0" y="0" fill="none" width="166" height="45" />
</svg>
foo bar
</div>
|
via
UI Button SVG/CSS3 hover effect
