پیشنمایش زنده
کد HTML
<div
class="flex justify-center items-center border-2 border-radius border-white-200 overflow-hidden p-1 rounded-full shadow-lg"
>
<button
class="bg-[linear-gradient(#e9e9e9,#e9e9e9_50%,#fff)] group w-50 h-16 inline-flex transition-all duration-300 overflow-visible p-1 rounded-full group"
>
<div
class="w-full h-full bg-[linear-gradient(to_top,#ececec,#fff)] overflow-hidden shadow-[0_0_1px_rgba(0,0,0,0.07),0_0_1px_rgba(0,0,0,0.05),0_3px_3px_rgba(0,0,0,0.25),0_1px_3px_rgba(0,0,0,0.12)] p-1 rounded-full hover:shadow-none duration-300"
>
<div
class="w-full h-full text-xl gap-x-0.5 gap-y-0.5 justify-center text-[#101010] bg-[linear-gradient(#f4f4f4,#fefefe)] group-hover:bg-[linear-gradient(#e2e2e2,#fefefe)] duration-200 items-center text-[18px] font-medium gap-4 inline-flex overflow-hidden px-4 py-2 rounded-full black group-hover:text-blue-600"
>
<svg
id="Github"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
>
<path
class="color5c6bc0 svgShape"
d="M7.999 0C3.582 0 0 3.596 0 8.032a8.031 8.031 0 0 0 5.472 7.621c.4.074.546-.174.546-.387 0-.191-.007-.696-.011-1.366-2.225.485-2.695-1.077-2.695-1.077-.363-.928-.888-1.175-.888-1.175-.727-.498.054-.488.054-.488.803.057 1.225.828 1.225.828.714 1.227 1.873.873 2.329.667.072-.519.279-.873.508-1.074-1.776-.203-3.644-.892-3.644-3.969 0-.877.312-1.594.824-2.156-.083-.203-.357-1.02.078-2.125 0 0 .672-.216 2.2.823a7.633 7.633 0 0 1 2.003-.27 7.65 7.65 0 0 1 2.003.271c1.527-1.039 2.198-.823 2.198-.823.436 1.106.162 1.922.08 2.125.513.562.822 1.279.822 2.156 0 3.085-1.87 3.764-3.652 3.963.287.248.543.738.543 1.487 0 1.074-.01 1.94-.01 2.203 0 .215.144.465.55.386A8.032 8.032 0 0 0 16 8.032C16 3.596 12.418 0 7.999 0z"
fill="#000000"
></path>
</svg>
<span class="ml-2">Github</span>
</div>
</div>
</button>
</div>
کد CSS
.ml-2 {
margin-left: 0.5rem;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.h-16 {
height: 4rem;
}
.h-full {
height: 100%;
}
.w-full {
width: 100%;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-4 {
gap: 1rem;
}
.gap-x-0\.5 {
column-gap: 0.125rem;
}
.gap-y-0\.5 {
row-gap: 0.125rem;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.rounded-full {
border-radius: 9999px;
}
.border-2 {
border-width: 2px;
}
.bg-\[linear-gradient\(\#e9e9e9\2c \#e9e9e9_50\%\2c \#fff\)\] {
background-image: linear-gradient(#e9e9e9, #e9e9e9 50%, #fff);
}
.bg-\[linear-gradient\(\#f4f4f4\2c \#fefefe\)\] {
background-image: linear-gradient(#f4f4f4, #fefefe);
}
.bg-\[linear-gradient\(to_top\2c \#ececec\2c \#fff\)\] {
background-image: linear-gradient(to top, #ececec, #fff);
}
.p-1 {
padding: 0.25rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.text-\[18px\] {
font-size: 18px;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-medium {
font-weight: 500;
}
.text-\[\#101010\] {
--tw-text-opacity: 1;
color: rgb(16 16 16 / var(--tw-text-opacity));
}
.shadow-\[0_0_1px_rgba\(0\2c
0\2c
0\2c
0\.07\)\2c
0_0_1px_rgba\(0\2c
0\2c
0\2c
0\.05\)\2c
0_3px_3px_rgba\(0\2c
0\2c
0\2c
0\.25\)\2c
0_1px_3px_rgba\(0\2c
0\2c
0\2c
0\.12\)\] {
--tw-shadow: 0 0 1px rgba(0, 0, 0, 0.07), 0 0 1px rgba(0, 0, 0, 0.05),
0 3px 3px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.12);
--tw-shadow-colored: 0 0 1px var(--tw-shadow-color),
0 0 1px var(--tw-shadow-color), 0 3px 3px var(--tw-shadow-color),
0 1px 3px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
.hover\:shadow-none:hover {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group:hover .group-hover\:bg-\[linear-gradient\(\#e2e2e2\2c \#fefefe\)\] {
background-image: linear-gradient(#e2e2e2, #fefefe);
}
.group:hover .group-hover\:text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}