Jinsi ya Kutengeneza CSS Keyframe Animations kwa Buttons
Jifunze jinsi ya kuongeza mazingatio ya kipekee kwenye buttons zako za website kwa kutumia CSS Keyframe Animations. Njia hii inafanya website yako kuwa interactive na kuvutia watumiaji kwa visual effects zinazobadilika kwenye hover au click.
Mfano wa Code:
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Button Animation</title>
<style>
/* Button Style */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
}
/* Keyframe Animation */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Apply animation on hover */
.button:hover {
animation: pulse 0.6s infinite;
}
</style>
</head>
<body>
<h2>CSS Keyframe Animation Button</h2>
<button class="button">Bonyeza Hapa</button>
</body>
</html>
Maelezo ya Code:
@keyframes pulse inabadilisha ukubwa wa button (scale) ili kutoa athari ya kupiga moyo.
animation: pulse 0.6s infinite; inafanya animation iendelee mara zote wakati button ipo kwenye hover.
Unaweza kubadilisha scale, muda (0.6s), na style ya button kulingana na taste yako.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509
Mfano wa Code:
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Button Animation</title>
<style>
/* Button Style */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
}
/* Keyframe Animation */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Apply animation on hover */
.button:hover {
animation: pulse 0.6s infinite;
}
</style>
</head>
<body>
<h2>CSS Keyframe Animation Button</h2>
<button class="button">Bonyeza Hapa</button>
</body>
</html>
Maelezo ya Code:
@keyframes pulse inabadilisha ukubwa wa button (scale) ili kutoa athari ya kupiga moyo.
animation: pulse 0.6s infinite; inafanya animation iendelee mara zote wakati button ipo kwenye hover.
Unaweza kubadilisha scale, muda (0.6s), na style ya button kulingana na taste yako.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509