ఎలా సృష్టించాలి: CSS పట్టిక

పట్టిక సృష్టించడం ఎలా చేయాలి

మొదటి చర్య - HTML జోడించండి:

ఈ ఉదాహరణలో, పట్టిక బటన్ ఎలమెంట్ కు చెందింది:

<button class="btn">అద్భుతమైన ఏదో కొరకు బటన్ <span class="ribbon">కొత్త</span></button>

రెండవ చర్య - CSS జోడించండి:

.btn {
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  color: white;
  position: relative;
}
.ribbon {
  width: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
  right: -25px;
  top: -12px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  color: white;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ వివరణం:

ఈ ఉదాహరణలో, CSS ఒక బటన్ కు రంగు పట్టిక ప్రభావాన్ని జోడించడానికి ఉపయోగించబడింది. ఈ పట్టిక అనేది బటన్ ఎలమెంట్ లోపల ఒక ప్రత్యేక శైలి కలిగిన span ఎలమెంట్ ద్వారా అమలుపరచబడింది. ఈ span ఎలమెంట్ బటన్ యొక్క ఉపరితల కుడి మూలను స్థానం చేయబడింది మరియు 20 డిగ్రీలు చుట్టూ చుట్టివేయబడింది, దీని ద్వారా పట్టిక ప్రభావాన్ని సృష్టించబడింది. పట్టిక యొక్క బ్యాక్‌గ్రౌండ్ కలర్ మరియు టెక్స్ట్ కలర్ బటన్ నుండి వేరు వేరు రంగులను సెట్ చేయబడింది, దీని ద్వారా విజువల్ ప్రభావాన్ని పెంచబడింది.