CSS ile giriş ve gönderme düğmesi nasıl oluşturulur?

CSS öğreniyorum. CSS ile giriş ve gönderme düğmesi nasıl oluşturulur?

Böyle bir şey yaratmaya çalışıyorum ama nasıl yapılacağı hakkında hiçbir fikrim yok

<form action="#" method="post">
    Name <input type="text" placeholder="First name"/>
    <input type="text" placeholder="Last name"/>
    Email <input type="text"/>
    Message <input type="textarea"/>
    <input type="submit" value="Send"/>
</form>

http://jsfiddle.net/vfUvZ/

İşte bir başlangıç ​​noktası

CSS:

input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    border-color:#333;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

Gönder düğmenize, diğer html öğelerine stil verirsiniz gibi stil verin. CSS öznitelik seçiciyi kullanarak farklı türde girdi öğeleri hedefleyebilirsiniz

Örnek olarak yazabilirsin

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

Diğer seçicilerle birleştirin

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

İşte çalışan bir Örnek

HTML

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

CSS

#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}

Kullanmak yerine öneririm

<input type='submit'>

kullanım

<button type='submit'>

Button, özellikle CSS stili göz önünde bulundurularak tanıtıldı. Artık gradyan arka plan resmini ona ekleyebilir veya CSS3 gradyanlarını kullanarak stil uygulayabilirsiniz.

HTML5 form yapısı hakkında daha fazlasını buradan okuyun

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

Şerefe! .Pav

Güvenilirlik açısından, idstil için öğelere sınıf adları veya s vermeyi (ideal classolarak metin girdileri için, muhtemelen birkaç olacağı için) ve idgönder düğmesine (a classda işe yarayacak olsa da ) vermenizi öneririm :

<form action="#" method="post">
    <label for="text1">Text 1</label>
    <input type="text" class="textInput" id="text1" />
    <label for="text2">Text 2</label>
    <input type="text" class="textInput" id="text2" />
    <input id="submitBtn" type="submit" />
</form>

CSS ile:

.textInput {
    /* styles the text input elements with this class */
}

#submitBtn {
    /* styles the submit button */
}

Daha güncel tarayıcılar için niteliklere göre seçim yapabilirsiniz (aynı HTML'yi kullanarak):

.input {
    /* styles all input elements */
}

.input[type="text"] {
     /* styles all inputs with type 'text' */
}

.input[type="submit"] {
     /* styles all inputs with type 'submit' */
}

Sadece kardeş birleştiricileri de kullanabilirsiniz (çünkü stile yönelik metin girdileri her zaman bir labelöğeyi takip ediyor gibi görünüyor ve gönderme bir metin alanını takip ediyor (ancak bu oldukça kırılgandır):

label + input,
label + textarea {
    /* styles input, and textarea, elements that follow a label */
}

input + input,
textarea + input {
    /* would style the submit-button in the above HTML */
}

form öğesi kullanıcı arabirimi bir şekilde tarayıcı ve işletim sistemi tarafından kontrol edilir, bu nedenle onları tüm yaygın tarayıcı / işletim sistemi kombinasyonlarında aynı görünecek şekilde çok güvenilir bir şekilde biçimlendirmek önemsiz değildir.

Bunun yerine, belirli bir şey istiyorsanız, size biçimlendirilebilir form öğeleri sağlayan bir kitaplık kullanmanızı tavsiye ederim. uniform.js böyle bir kitaplıktır.

Bir giriş türünü şekillendirirken aşağıdaki kodu kullanın.

   input[type=submit] {
    background-color: pink; //Example stlying
    }

Aslında bu da harika çalışıyor.

input[type=submit]{
                 width: 15px;
                 position: absolute;
                 right: 20px;
                 bottom: 20px;
                 background: #09c;
                 color: #fff;
                 font-family: tahoma,geneva,algerian;
                 height: 30px;
                 -webkit-border-radius: 15px;
                 -moz-border-radius: 15px;
                 border-radius: 15px;
                 border: 1px solid #999;
             }

Burada verilen cevaplara göre bu şekilde yaptım, umarım yardımcı olur

.likeLink {
    background: none !important;
    color: #3387c4;
    border: none;
    padding: 0 !important;
    font: inherit;
    cursor: pointer;
}
    .likeLink:hover {
        background: none !important;
        color: #25618c;
        border: none;
        padding: 0 !important;
        font: inherit;
        cursor: pointer;
        text-decoration: underline;
    }

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<a href="#" class="btn">Push</a>
</div>
</body>
</html>

CSS stili

a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}

Çok basit:

<html>
<head>
<head>
<style type="text/css">
.buttonstyle 
{ 
background: black; 
background-position: 0px -401px; 
border: solid 1px #000000; 
color: #ffffff;
height: 21px;
margin-top: -1px;
padding-bottom: 2px;
}
.buttonstyle:hover {background: white;background-position: 0px -501px;color: #000000; }
</style>
</head>
<body>
<form>
<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>
</form>
</body>
</html>

Bu çalışıyor, test ettim.