Қалай жіберу керек?

Қалай стильді ұсыну нысаны? Мүмкін, немесе суретті (png) пайдалану керек пе? Мен осындай нәрсені білдіреді:

enter image description here

5
Енді CSS3, border-radius және gradients
қосылды автор Nick R, көзі

7 жауаптар

Алдымен сіз CSS немесе Cascading Style Sheets туралы білуіңіз керек. Олар біздің веб-беттерімізді стильдеу үшін қолданылады. CSS-ні ​​қолданып сіз өзіңіздің батырмаңызды өңдей аласыз.

Just for Instance:

CSS деген не?

  • CSS - бұл каскадты стиль кестелерін білдіреді
  • Стильдер HTML элементтерін көрсету әдісін анықтайды
  • Мәселені шешу үшін стильдер HTML 4.0-ке қосылды
  • Сыртқы мәнер кестелері көп жұмысын сақтай алады
  • Сыртқы мәнер кестелері CSS файлдарында сақталады

Түймені мына сияқты стильдеңіз:

input[type=submit] {
    border-radius: 5px;
    border: 0;
    width: 80px;
    height:25px;
    font-family: Tahoma;
    background: #f4f4f4;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #f4f4f4), color-stop(100%, #ededed));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #f4f4f4 1%, #ededed 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#ededed', GradientType=0);
    /* IE6-9 */
}

http://jsfiddle.net/mareebsiddiqui/jGVa3/1

11
қосылды

мұны CSS арқылы жасай аласыз ... HTML парағында Сіз қосуыңыз керек

<input type="submit" value="Send"/>

одан кейін осы мәтінді басқа бір CSS файлында бірдей HTML файлына қосу керек.


Сізге көмектесетініне үміттенемін

3
қосылды
input[type="submit"]{your style here}
3
қосылды
try this 
    .button {
      -moz-border-radius: 25px;
      -moz-box-shadow: #6E7849 0px 0px 10px;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -webkit-border-radius: 25px;
      -webkit-box-shadow: #6E7849 0 0 10px;
      -webkit-transition: all 0.5s ease;
      background-color: #6E7849;
      background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);
      background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);
      background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
      background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
      background-image: linear-gradient(90deg, #B9C788, #6E7849);
      border-radius: 25px;
      border: 2px solid #4a5032;
      box-shadow: #6E7849 0px 0px 10px;
      color: #ffffff;
      display: inline-block;
      font-size: 4em;
      margin: auto;
      padding: 15px;
      text-decoration: none;
      text-shadow: #000000 5px 5px 15px;
      transition: all 0.5s ease;
    }

    .button:hover {
      padding: 15px;
    }

OR 
try your choice color combination button
http://www.cssdrive.com/css3button/
2
қосылды
Менің ойымша, енді шекара радиусы қазір стандартты емес -webkit- немесе -o- немесе -moz- :) қажет емес.
қосылды автор Mohammad Areeb Siddiqui, көзі

Сіз мұны келесі жолмен орындай аласыз: -

input[type="submit"] {

/*

style code here 

*/
}
1
қосылды

Браузерлер мәнерлер веб-сайтпен орнатылмаған болса, әдемі көріністер жасау үшін әдепкі мәнерлер жиынтығымен келеді. Мысалы, Firefox әдепкі жіберу түймешігі үшін анықталған келесі стильдер бар:

input[type="submit"] {
    -moz-appearance: button;
    -moz-binding: none;
    -moz-box-sizing: border-box;
    -moz-user-select: none;
    background-color: buttonface;
    border: 2px outset buttonface;
    color: buttontext;
    cursor: default;
    font: -moz-button;
    line-height: normal;
    padding: 0 6px;
    text-align: center;
    text-shadow: none;
    white-space: pre;
}
1
қосылды

сіз қалағандай батырмасын басуыңызға болады. Алдыңғы жауаптардағыдай, сіз өзіңіздің батырмаңызды [type = «submit»] енгізу арқылы таңдай аласыз.

Сіз мына сілтемеге өтуді ұсынамын: http://css3button.net/ мұнда Сіз CSS3 сипаттарының көпшілігін пайдаланып, батырманы автоматты түрде жасау. Кросс-браузерлердің қажеттіліктеріне сәйкес, http://caniuse.com/ торабына өтіңіз бе? бұл қасиеттерді пайдалану мағынасы бар. Әйтпесе сіз bg суретін пайдалана аласыз :-)

Құрметпен

1
қосылды