CSS బటన్
- ముంది పేజీ CSS షేడ్
- తదుపరి పేజీ CSS పేజినేషన్
క్లాస్స్ సిఎస్ఎస్ బటన్ స్టైల్స్ ఎలా వాడాలి నేర్చుకోండి.
బాసిక్ బటన్ స్టైల్
实例
.button {
background-color: #4CAF50; /* హరిత */
బార్డర్: నాన్;
color: white;
ప్యాడింగ్: 15పిక్సెల్స్ 32పిక్సెల్స్;
టెక్స్ట్ అలాయన్స్: సెంటర్;
టెక్స్ట్ డికోరేషన్: నాన్;
డిస్ప్లే: ఇన్‌లైన్ బ్లాక్;
ఫాంట్ సైజ్: 16పిక్సెల్స్;
}
బటన్ రంగు
ఉపయోగించండి బ్యాక్గ్రౌండ్ కలర్ బటన్ పరికరం బ్యాక్గ్రౌండ్ రంగు మార్చండి:
实例
.button1 {బ్యాక్గ్రౌండ్ కలర్: #4CAF50; /* హరితం */}
.button2 {బ్యాక్గ్రౌండ్ కలర్: #008CBA; /* నీలం */}
.button3 {బ్యాక్గ్రౌండ్ కలర్: #f44336; /* ఎరుపు */}
.button4 {బ్యాక్గ్రౌండ్ కలర్: #e7e7e7; రంగు: నలుపు; /* ముదురు */}
.button5 {బ్యాక్గ్రౌండ్ కలర్: #555555; /* నలుపు */}
బటన్ పరిమాణం
ఉపయోగించండి ఫాంట్ సైజ్ బటన్ పరికరం ఫాంట్ సైజ్ మార్చండి:
实例
.button1 {ఫాంట్ సైజ్: 10పిక్సెల్స్;}
.button2 {ఫాంట్ సైజ్: 12పిక్సెల్స్;}
.button3 {ఫాంట్ సైజ్: 16పిక్సెల్స్;}
.button4 {ఫాంట్ సైజ్: 20పిక్సెల్స్;}
.button5 {ఫాంట్ సైజ్: 24పిక్సెల్స్;}
ఉపయోగించండి ప్యాడింగ్ బటన్ పరికరం పెద్దతనం మార్చండి:
实例
.button1 {ప్యాడింగ్: 10పిక్సెల్స్ 24పిక్సెల్స్;}
.button2 {ప్యాడింగ్: 12పిక్సెల్స్ 28పిక్సెల్స్;}
.button3 {ప్యాడింగ్: 14పిక్సెల్స్ 40పిక్సెల్స్;}
.button4 {ప్యాడింగ్: 32పిక్సెల్స్ 16పిక్సెల్స్;}
.button5 {ప్యాడింగ్: 16పిక్సెల్స్;}
కంటోర్ బటన్
ఉపయోగించండి బార్డర్ రేడియస్ అటువంటి విధంగా బటన్ కు కంటోర్ జోడించండి:
实例
.button1 {బార్డర్ రేడియస్: 2పిక్సెల్స్;}
.button2 {బార్డర్ రేడియస్: 4పిక్సెల్స్;}
.button3 {బార్డర్ రేడియస్: 8పిక్సెల్స్;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
రంగు బార్డర్ బటన్
ఉపయోగించండి border లక్షణం బటన్కు రంగు బార్డర్ జోడించడానికి చేస్తుంది:
实例
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* హరిత */
}
...
హోవర్ బటన్
మౌస్ బటన్ పైకి తరలించినప్పుడు ఉపయోగించండి :hover ఎంపికకర్త బటన్ శైలిని మార్చడానికి చేస్తుంది。
సూచన:ఉపయోగించండి transition-duration లక్షణం హోవర్ ప్రభావం వేగాన్ని నిర్ణయించడానికి చేస్తుంది:
实例
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* హరిత */
color: white;
}
...
శాడో బటన్
ఉపయోగించండి box-shadow లక్షణం బటన్కు శాడో జోడించడానికి చేస్తుంది:
实例
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
డిసేబుల్ బటన్
ఉపయోగించండి opacity లక్షణం బటన్కు కాంప్లెక్షన్ చేసేందుకు బటన్కు పారదర్శకత జోడించండి (డిసేబుల్ ప్రకటన సృష్టించండి).
సూచన:మీరు కూడా "not-allowed" విలువను కలిగించిన cursor లక్షణం, మీరు మౌస్ ను బటన్ పైనకు తీసుకుపోయినప్పుడు, ఈ లక్షణం "no parking sign" (నిషిద్ధ సెగ్న్) చూపిస్తుంది:
实例
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
బటన్ వెడిథ్
అప్రమేయంగా, బటన్ పరిమాణం లక్షణాల వాటికి అనుగుణంగా ఉంటుంది (లక్షణాల వెడిథ్ తో అనుగుణంగా). ఉపయోగించండి width బటన్ వెడిథ్ మార్చడానికి అనువర్తనం చేసే లక్షణం జోడించండి:
实例
బటన్ గ్రూప్
తొలగించండి బాహ్య కస్టమ్ మరియు ప్రతి బటన్కు జోడించండి float:left，来创建按钮组：
实例
.button {
float: left;
}
带边框的按钮组
使用 border 属性来创建带边框的按钮组：
实例
.button {
float: left;
border: 1px solid green;
}
垂直按钮组
使用 display:block 取代 float:left 将按钮上下分组，而不是并排：
实例
.button {
display: block;
}
动画按钮
实例 1
在鼠标悬停时添加箭头：
ఉదాహరణ 2
క్లిక్ సమయంలో 'డ్రాప్' ప్రభావాన్ని జోడించండి:
ఉదాహరణ 3
మౌస్ హోవర్ లో హోలో కావడం:
ఉదాహరణ 4
క్లిక్ సమయంలో 'రిఫ్లక్ష్' ప్రభావాన్ని జోడించండి:
- ముంది పేజీ CSS షేడ్
- తదుపరి పేజీ CSS పేజినేషన్
