پیشنمایش زنده
کد HTML
<button class="cssbuttons-io">
<span>
Start Finding
<svg
viewBox="0 0 19.9 19.7"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby="title desc"
class="svg-icon search-icon"
>
<title>Search Icon</title>
<desc id="desc">A magnifying glass icon.</desc>
<g stroke="white" fill="none" class="search-path">
<path d="M18.5 18.3l-5.4-5.4" stroke-linecap="square"></path>
<circle r="7" cy="8" cx="8"></circle>
</g>
</svg>
</span>
</button>
کد CSS
.cssbuttons-io {
position: relative;
font-family: inherit;
font-weight: 600;
font-size: 17px;
border-radius: 0.8em;
cursor: pointer;
border: none;
background: linear-gradient(to right, #00bf63, #5ce1e6);
color: ghostwhite;
overflow: hidden;
}
.cssbuttons-io svg {
width: 1.2em;
height: 1.2em;
margin-left: 0.7em;
stroke-width: 2px;
}
.cssbuttons-io span {
position: relative;
z-index: 10;
transition: color 0.4s;
display: inline-flex;
align-items: center;
padding: 0.8em 0.9em 0.8em 1.02em;
}
.cssbuttons-io::before,
.cssbuttons-io::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.cssbuttons-io::before {
content: "";
background: #000;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.cssbuttons-io:hover::before {
transform: translate3d(100%, 0, 0);
}
.cssbuttons-io:active {
transform: scale(0.95);
}