پیشنمایش زنده
کد HTML
<div class="getaround-container">
<div class="getaround-button">
<span class="getaround-text">Get Around</span>
<svg viewBox="0 0 24 24" class="getaround-icon">
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42z"
></path>
</svg>
</div>
<div class="getaround-tooltip">
<div class="getaround-icons">
<a class="getaround-icon-btn python" href="#">
<svg viewBox="0 0 24 24">
<path
d="M11.9 2.2c-4.5 0-8.2 3.7-8.2 8.2 0 4.5 3.7 8.2 8.2 8.2 4.5 0 8.2-3.7 8.2-8.2 0-4.5-3.7-8.2-8.2-8.2zm0 14.9c-3.7 0-6.7-3-6.7-6.7 0-3.7 3-6.7 6.7-6.7 3.7 0 6.7 3 6.7 6.7 0 3.7-3 6.7-6.7 6.7zM8.5 7.8c-.4 0-.8-.3-.8-.8 0-.4.3-.8.8-.8.4 0 .8.3.8.8 0 .4-.4.8-.8.8zm6.9 0c-.4 0-.8-.3-.8-.8 0-.4.3-.8.8-.8.4 0 .8.3.8.8 0 .4-.4.8-.8.8z"
></path>
</svg>
</a>
<a class="getaround-icon-btn chat" href="#">
<svg viewBox="0 0 24 24">
<path
d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"
></path>
</svg>
</a>
<a class="getaround-icon-btn like" href="#">
<svg viewBox="0 0 24 24">
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
></path>
</svg>
</a>
</div>
</div>
</div>
کد CSS
/* Base Styles */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f8f9fa;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* Container */
.getaround-container {
position: relative;
display: inline-block;
}
/* Main Button */
.getaround-button {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
background: linear-gradient(135deg, #4a6bff, #6a11cb);
color: white;
border-radius: 50px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
z-index: 10;
}
.getaround-button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(106, 17, 203, 0.4),
rgba(74, 107, 255, 0.4)
);
filter: blur(15px);
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
}
.getaround-button::after {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 70%
);
transform: scale(0);
transition: transform 0.6s ease-out;
z-index: -1;
}
.getaround-button:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.getaround-button:hover::before {
opacity: 1;
}
.getaround-button:hover::after {
transform: scale(1);
}
.getaround-button:active {
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
/* Button Text */
.getaround-text {
font-size: 18px;
font-weight: 600;
margin-right: 12px;
transition: letter-spacing 0.3s ease;
}
.getaround-button:hover .getaround-text {
letter-spacing: 1px;
}
/* Button Icon */
.getaround-icon {
width: 24px;
height: 24px;
fill: white;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.getaround-button:hover .getaround-icon {
transform: rotate(360deg);
}
/* Tooltip */
.getaround-tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) scale(0.9);
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
padding: 16px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 100;
margin-top: 12px;
backdrop-filter: blur(10px);
}
.getaround-container:hover .getaround-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scale(1);
}
.getaround-tooltip::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 0 10px 10px 10px;
border-style: solid;
border-color: transparent transparent rgba(255, 255, 255, 0.95) transparent;
}
/* Icons Container */
.getaround-icons {
display: flex;
gap: 16px;
}
/* Icon Buttons */
.getaround-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: #f1f3f5;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.getaround-icon-btn svg {
width: 24px;
height: 24px;
transition: all 0.3s ease;
}
.getaround-icon-btn:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.getaround-icon-btn:active {
transform: translateY(-2px) scale(1.05);
}
/* Python Icon */
.getaround-icon-btn.python:hover {
background: linear-gradient(135deg, #3776ab, #ffd343);
}
.getaround-icon-btn.python:hover svg {
fill: white;
}
/* Chat Icon */
.getaround-icon-btn.chat:hover {
background: linear-gradient(135deg, #25d366, #128c7e);
}
.getaround-icon-btn.chat:hover svg {
fill: white;
}
/* Like Icon */
.getaround-icon-btn.like:hover {
background: linear-gradient(135deg, #ff4d4d, #d32f2f);
}
.getaround-icon-btn.like:hover svg {
fill: white;
}
/* Pulse Animation */
@keyframes getaround-pulse {
0% {
box-shadow: 0 0 0 0 rgba(74, 107, 255, 0.4);
}
70% {
box-shadow: 0 0 0 15px rgba(74, 107, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(74, 107, 255, 0);
}
}
.getaround-button {
animation: getaround-pulse 3s infinite;
}
/* Responsive Design */
@media (max-width: 768px) {
.getaround-button {
padding: 12px 24px;
}
.getaround-text {
font-size: 16px;
}
.getaround-tooltip {
padding: 12px;
}
.getaround-icons {
gap: 12px;
}
.getaround-icon-btn {
width: 44px;
height: 44px;
}
.getaround-icon-btn svg {
width: 20px;
height: 20px;
}
}