پیشنمایش زنده
کد HTML
<button class="button flex">
<div class="text-let">Let's</div>
<div class="portal flex">
<div class="flex">
<div class="blue-line"></div>
<div class="portal-line"></div>
</div>
<div class="">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<svg
class="svg"
width="30"
height="30"
viewBox="0 0 40 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M26 26C26 26.5304 25.7893 27.0391 25.4142 27.4142C25.0391 27.7893 24.5304 28 24 28C23.4696 28 22.9609 27.7893 22.5858 27.4142C22.2107 27.0391 22 26.5304 22 26C22 25.4696 22.2107 24.9609 22.5858 24.5858C22.9609 24.2107 23.4696 24 24 24C24.5304 24 25.0391 24.2107 25.4142 24.5858C25.7893 24.9609 26 25.4696 26 26Z"
fill="white"
></path>
<path
d="M28 50C28 50.5304 27.7893 51.0391 27.4142 51.4142C27.0391 51.7893 26.5304 52 26 52C25.4696 52 24.9609 51.7893 24.5858 51.4142C24.2107 51.0391 24 50.5304 24 50C24 49.4696 24.2107 48.9609 24.5858 48.5858C24.9609 48.2107 25.4696 48 26 48C26.5304 48 27.0391 48.2107 27.4142 48.5858C27.7893 48.9609 28 49.4696 28 50Z"
fill="white"
></path>
<path
d="M36 75C36 75.5304 35.7893 76.0391 35.4142 76.4142C35.0391 76.7893 34.5304 77 34 77C33.4696 77 32.9609 76.7893 32.5858 76.4142C32.2107 76.0391 32 75.5304 32 75C32 74.4696 32.2107 73.9609 32.5858 73.5858C32.9609 73.2107 33.4696 73 34 73C34.5304 73 35.0391 73.2107 35.4142 73.5858C35.7893 73.9609 36 74.4696 36 75Z"
fill="white"
></path>
<path
d="M16 75C16 75.5304 15.7893 76.0391 15.4142 76.4142C15.0391 76.7893 14.5304 77 14 77C13.4696 77 12.9609 76.7893 12.5858 76.4142C12.2107 76.0391 12 75.5304 12 75C12 74.4696 12.2107 73.9609 12.5858 73.5858C12.9609 73.2107 13.4696 73 14 73C14.5304 73 15.0391 73.2107 15.4142 73.5858C15.7893 73.9609 16 74.4696 16 75Z"
fill="white"
></path>
<path
d="M10 40C10 40.5304 9.78929 41.0391 9.41421 41.4142C9.03914 41.7893 8.53043 42 8 42C7.46957 42 6.96086 41.7893 6.58579 41.4142C6.21071 41.0391 6 40.5304 6 40C6 39.4696 6.21071 38.9609 6.58579 38.5858C6.96086 38.2107 7.46957 38 8 38C8.53043 38 9.03914 38.2107 9.41421 38.5858C9.78929 38.9609 10 39.4696 10 40Z"
fill="white"
></path>
<path
d="M42 56C42 56.5304 41.7893 57.0391 41.4142 57.4142C41.0391 57.7893 40.5304 58 40 58C39.4696 58 38.9609 57.7893 38.5858 57.4142C38.2107 57.0391 38 56.5304 38 56C38 55.4696 38.2107 54.9609 38.5858 54.5858C38.9609 54.2107 39.4696 54 40 54C40.5304 54 41.0391 54.2107 41.4142 54.5858C41.7893 54.9609 42 55.4696 42 56Z"
fill="white"
></path>
</svg>
<div class="text-magic">Magic</div>
</button>
کد CSS
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.flex-row {
flex-direction: row;
}
.button {
cursor: pointer;
padding: 12px 20px;
border-radius: 18px;
font-size: 1.4rem;
font-weight: bolder;
border: solid 1px #767676;
background: radial-gradient(circle 120px at -10% -80%, #51678c, #161c26);
color: #fff;
}
.text-let {
margin-right: 10px;
}
.text-magic {
margin-left: -10px;
background: -webkit-linear-gradient(180deg, #ffffff, #ad998b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bolder;
}
.svg {
margin-left: -50px;
}
.portal-line {
width: 4px;
height: 30px;
border-radius: 999px;
background-color: #fff;
}
.line1 {
width: 48px;
height: 12px;
border-radius: 999px;
background: linear-gradient(
90deg,
#ffffffa6 0%,
#eea45aa1 50%,
#161c2600 100%
);
filter: blur(5px);
transform: rotate(-23deg);
margin-bottom: -2px;
}
.line2 {
width: 45px;
height: 15px;
border-radius: 999px;
background: linear-gradient(
90deg,
#ffffffa6 0%,
#eea45aa1 50%,
#161c2600 100%
);
filter: blur(5px);
}
.line3 {
width: 48px;
height: 12px;
border-radius: 999px;
background: linear-gradient(
90deg,
#ffffffa6 0%,
#eea45aa1 50%,
#161c2600 100%
);
filter: blur(5px);
transform: rotate(23deg);
margin-top: -2px;
}