सीएसएस 3 बटन पृष्ठभूमि रंग अनंत संक्रमण

Question

क्या बटन के पृष्ठभूमि रंग को ग्रे से नीले रंग में फीका करने का कोई तरीका है, फिर केवल css3 का उपयोग करके भूरे रंग में? एक अच्छा उदाहरण एक डिफ़ॉल्ट कार्रवाई बटन कोको है? मुझे पता है कि यह जावास्क्रिप्ट में किया जा सकता है लेकिन मैं इसके बजाय केवल सीएसएस का उपयोग करता हूं।

Answer 1

हाय मैं CSS3 के एनीमेशन के माध्यम से बटन बना दिया है कृपया देखो मैं आशा अपने अपने प्रश्न का पास है: -

एचटीएमएल

<input type="submit" value="submit" class="button" /> 

सीएसएस

.button { 
    width:100px; 
    height:20px; 
    background:red; 
    animation:myfirst 5s; 
    -moz-animation:myfirst 5s infinite; /* Firefox */ 
    -webkit-animation:myfirst 5s infinite; /* Safari and Chrome */ 
} 

@-moz-keyframes myfirst /* Firefox */ { 
    0% {background:red;} 
    50% {background:yellow;} 
    100% {background:red;} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ { 
    0% {background:red;} 
    50% {background:yellow;} 
    100% {background:red;} 
} 

देखना डेमो: - http://jsbin.com/osohak/7/edit

के बारे में CSS3 के संक्रमण & एनीमेशन http://css3.bradshawenterprises.com/cfimg/

Answer 2

आप hover या ऐसी बातों पर एनीमेशन फीका की जरूरत है, CSS3 transition property अपने समाधान है और अधिक पढ़ें।

संपादित करें:

.btn { 
    background-color: lightblue; 
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ 
    -moz-transition: all 0.3s ease-out; /* FF4+ */ 
     -ms-transition: all 0.3s ease-out; /* IE10 */ 
     -o-transition: all 0.3s ease-out; /* Opera 10.5+ */ 
      transition: all 0.3s ease-out; 
} 

.btn:hover { 
    background-color: lightgreen; 
}