طريقة لجعل الزوايا الدائرية على شكل تقديم أزرار

Question

ما أبحث عنه هو طريقة نظيفة لتقريب زوايا جميع المدخلات مع الطبقة "إرسال". لقد قمت بتجربة عدد من تقنيات JavaScript، لكن لا شيء يعمل بشكل جيد لعناصر النموذج. سيكون CSS النقي رائعا، ولكن الملاحظة، يحتاج الزر إلى التوسع، وسوف يكون لديك نص تعسفي. تتطلب الطرق الأخرى قبيحة HTML Cruft حول المدخلات، والتي لا أريدها.

أيه أفكار؟

Answer 1

محاولة curvycorners. (30،100 بايت، تصريح) لهذا الحل لأن متصفح IE لن يجعل تقريبه. لم أحاول إضافة صورة رغم ذلك.

<style type="text/css">
.input-rounded-button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    padding:0 3px 0 3px;
    display:inline-block;
    text-decoration:none;
    background:#595651;

    color:#FFFFFF;
    cursor:pointer;
    font:11px sans-serif;
}

.input-rounded-button:hover { 
    text-decoration:none; 
    color:#ADD8E6; 
    cursor:pointer;
    border:1px solid #FF2B06;
}
</style>

<input class="input-rounded-button" type="button" value="SEARCH" />

Answer 2

لقد كنت أستخدم هذه الطريقة لفترة من الوقت -

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html.

إنه يعمل بشكل جيد

Answer 3

ربما هذا واحد هو نوع الحل البارد الذي تبحث عنه. على الرغم من أنها لا تدعم التحجيم العمودي. (لماذا بحق الجحيم هل لديك أزرار إرسال Multiline؟)

http://www.hedgerwow.com/360/dhtml/ui-css-input-replacement/demo.php.

إنها متخصصة في تقديم أزرار وتدعم نطاق متصفح معقول إلى حد ما.

Answer 4

إذا كنت قادرا على استخدام CSS3، فإن أسهل طريقة أعرفها هي القيام بذلك:

.button
{
  background-color:#f57070;
  border-radius: 10px;    //-rounding the edges, only available in CSS3-//
  font-family:arial;
  font-size:30px;
  text-decoration:none;
}

مع رمز HTML:

<a href=# class='button'>...</a>

يجعل زر أحمر لطيف مع حواف مدورة.