پێشبینی کۆدی ڕاستەوخۆ
بەشی کۆدەکان
HTML Code
<div class="ai-input-container">
<input placeholder="Ask me anything..." class="ai-input" type="text" />
<button class="ai-button">Send</button>
</div>
CSS Code
.ai-input-container {
display: flex;
align-items: center;
width: 400px;
background: #ffffff;
border-radius: 30px;
padding: 5px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.ai-input-container:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
/* Input Field Styling */
.ai-input {
flex: 1;
border: none;
outline: none;
padding: 15px 20px;
font-size: 16px;
border-radius: 30px;
background: transparent;
color: #333;
transition: all 0.3s ease;
}
.ai-input::placeholder {
color: #aaa;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.ai-input:focus::placeholder {
color: transparent;
}
.ai-input:focus {
box-shadow: inset 0 0 0 2px #6e8efb;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
box-shadow: inset 0 0 0 2px #6e8efb;
}
50% {
box-shadow: inset 0 0 0 4px #a777e3;
}
100% {
box-shadow: inset 0 0 0 2px #6e8efb;
}
}
/* Button Styling */
.ai-button {
border: none;
outline: none;
background: #6e8efb;
color: #fff;
font-size: 16px;
padding: 10px 20px;
border-radius: 30px;
cursor: pointer;
transition:
all 0.3s ease,
transform 0.3s ease;
margin-left: 1px; /* Adjust spacing between input and button */
position: relative;
overflow: hidden;
}
.ai-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transform: skewX(-45deg);
transition: left 0.5s ease;
}
.ai-button:hover::before {
left: 100%;
}
.ai-button:hover {
background: #5a7de2;
}
.ai-button:active {
transform: scale(0.95);
}
/* Additional Animations */
.ai-button:focus {
animation: bounce 0.5s ease;
}
@keyframes bounce {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
JS Code
بینینەکان : 199
ناوی سەرچاوە
ئینپوتەکانی AI 4
وەسف
ئینپوتەکانی AI 4
HTML & CSS
ئینپوتەکانی...
HTML & CSS
ئینپوتەکانی...
HTML & CSS
ئینپوتەکانی...
Tailwind CSS
کارتی پارەد...
Tailwind CSS
هاتنە ژوورە...
HTML & CSS
نامە بۆکس
Tailwind CSS
بارکردنی فا...
Tailwind CSS