پیشنمایش زنده
کد HTML
<button class="pinBtn">
<span class="IconContainer">
<svg
stroke-width="0"
height="0.9rem><g id="
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
xml:space="preserve"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 64 64"
fill="#000000"
>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<rect
style="fill:none;"
height="800"
width="1280"
y="-320"
x="-320"
id="Icons"
></rect>
<g id="Icons1">
<g id="Strike"></g>
<g id="H1"></g>
<g id="H2"></g>
<g id="H3"></g>
<g id="list-ul"></g>
<g id="hamburger-1"></g>
<g id="hamburger-2"></g>
<g id="list-ol"></g>
<g id="list-task"></g>
<g id="trash"></g>
<g id="vertical-menu"></g>
<g id="horizontal-menu"></g>
<g id="sidebar-2"></g>
<g id="Pen"></g>
<g id="Pen1"></g>
<g id="clock"></g>
<g id="external-link"></g>
<g id="hr"></g>
<g id="info"></g>
<g id="warning"></g>
<g id="plus-circle"></g>
<g id="minus-circle"></g>
<g id="vue"></g>
<g id="cog"></g>
<g id="logo"></g>
<g id="radio-check"></g>
<g id="eye-slash"></g>
<g id="eye"></g>
<g id="toggle-off"></g>
<g>
<path
style="fill-rule:nonzero;"
d="M29.975,35.163l3.235,3.234c0.353,0.331 0.5,0.388 0.773,0.481c1.049,0.354 2.203,-0.133 2.576,-1.389l1.204,-4.605l6.544,-6.544l3.69,-0.486c0.431,-0.071 0.691,-0.136 1.153,-0.568l2.47,-2.47c0.275,-0.294 0.298,-0.365 0.379,-0.53c0.372,-0.754 0.33,-1.541 -0.379,-2.299c-3.803,-3.802 -7.485,-7.727 -11.41,-11.403c-0.311,-0.255 -0.383,-0.273 -0.553,-0.344c-0.734,-0.304 -1.454,-0.246 -2.18,0.434l-2.47,2.47c-0.302,0.323 -0.471,0.537 -0.57,1.17l-0.457,3.713l-6.531,6.531l-4.63,1.172c-0.924,0.267 -0.962,0.52 -1.162,0.813c-0.528,0.776 -0.53,1.719 0.239,2.54l3.235,3.235l-13.134,17.979l17.978,-13.134Zm-2.698,-2.698l0.551,0.551l-2.044,1.493l1.493,-2.044Zm11.615,-19.549l8.485,8.486l-0.576,0.575c-1.23,0.162 -2.459,0.324 -3.689,0.486c-0.699,0.116 -0.851,0.286 -1.153,0.569l-7.407,7.407c-0.235,0.251 -0.367,0.389 -0.521,0.908l-0.459,1.755l-6.359,-6.358l1.752,-0.444c0.339,-0.097 0.535,-0.159 0.923,-0.524l7.407,-7.408c0.493,-0.527 0.507,-0.757 0.571,-1.17l0.457,-3.713l0.569,-0.569Z"
></path>
</g>
<g id="shredder"></g>
<g id="spinner--loading--dots-"></g>
<g id="react"></g>
<g id="check-selected"></g>
<g id="turn-off"></g>
<g id="code-block"></g>
<g id="user"></g>
<g id="coffee-bean"></g>
<g id="coffee-beans"><g id="coffee-bean1"></g></g>
<g id="coffee-bean-filled"></g>
<g id="coffee-beans-filled"><g id="coffee-bean2"></g></g>
<g id="clipboard"></g>
<g id="clipboard-paste"></g>
<g id="clipboard-copy"></g>
<g id="Layer1"></g>
</g>
</g>
</svg>
</span>
<p class="text">Pin</p>
</button>
کد CSS
.pinBtn {
width: 100px;
height: 40px;
border-radius: 40px;
border: 1px solid rgba(255, 255, 255, 0.349);
background-color: rgb(12, 12, 12);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition-duration: 0.3s;
overflow: hidden;
}
.IconContainer {
width: 30px;
height: 30px;
background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 2;
transition-duration: 0.3s;
}
.icon {
border-radius: 1px;
}
.text {
height: 100%;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
color: white;
z-index: 1;
transition-duration: 0.3s;
font-size: 1.04em;
}
.pinBtn:hover .IconContainer {
width: 90px;
border-radius: 40px;
transition-duration: 0.3s;
}
.pinBtn:hover .text {
transform: translate(10px);
width: 0;
font-size: 0;
transition-duration: 0.3s;
}
.pinBtn:active {
transform: scale(0.95);
transition-duration: 0.3s;
}