كيفية تغيير شكل زر الإرسال إلى دائرة [مكررة]

https://stackoverflow.com//questions/11671429

12-12-2019
|

سؤال

التكرار المحتمل:
رسم الدائرة باستخدام CSS وحده

أود أن أعرف هل هناك أي طريقة لتغيير شكل زر الإرسال من الشكل المستطيل إلى الشكل الدائري؟؟

لا أريد استخدام حل الصورة الدائرية. أريد جميع الخصائص الأخرى للزر بدءًا من نمط CSS.

المحلول

تمت الإجابة على سؤالك بالفعل ولكني أوصيك بذلك تويتر بوتستراب.

إنه إطار عمل HTML/CSS يسمح لك بإنشاء أزرار رائعة (من بين أمور أخرى) بسهولة.

هذه الأزرار هي "متصفح متقاطع" مما يعني أنها متوافقة مع Internet Explorer.

مع فئة واحدة فقط - btn - يمكنك تبسيط أ <button>, <input type="button"> أو <a>.

هذا :

<button class="btn"></button>

يعطي ذلك:

enter image description here

يمكنك أيضًا تخصيص الزر الخاص بك بسرعة باستخدام فئة اختيارية:

btn-primary, btn-info, btn-success, btn-warning, btn-danger و btn-inverse.

تقوم هذه الفئات بتحويل الزر الخاص بك مثل هذا:

enter image description here

ثم يمكنك اختيار الحجم مع الفصول الدراسية btn-large, btn-small و btn-mini.

وأخيرًا، يمكنك إضافة أيقونة (القائمة هنا) في الزر الخاص بك.

هذا:

<button class="btn btn-success">
    <i class="icon-shopping-cart icon-white"></i>
    <span>Checkout</span>
</button>

يعطي ذلك:

enter image description here

استمتع بأزرارك الجديدة. :)

نصائح أخرى

يستخدم border-radius ملكية.

مثال:

.button {
    width: 100px;
    height: 100px;
    background-color: #000;
    border: solid 1px #000;
    border-radius: 50%
}

المثال أعلاه سوف يعطيك دائرة منتظمة.

إذا كنت تريد شكلًا مستديرًا قليلًا، جرب هذا:

.button {
    width: 100px;
    height: 30px;
    background-color: #000;
    border: solid 1px #000;
    border-radius: 5px
}

عرض حي: دائرة منتظمة
عرض حي: شكل مستدير
عرض حي: زر الإدخال مع النص

استخدم نصف قطر حدود CSS.أوصي بالبحث على Google عن "مولد أزرار CSS" أو ما شابه والعثور على أي عدد من أدوات إنشاء الأزرار التي يمكنك اللعب بها للحصول على CSS بشكل صحيح.ستحتاج فقط إلى التأكد من أن ارتفاع العنصر = العرض ثم قم بضبط نصف قطر الزاوية وفقًا لذلك.

استخدم هذا النمط:

input[type='submit'] {
    width:100px;
    height:100px;
    border-radius:50px;
}

يمكنك استخدام border-radius في CSS الخاص بك ولكن لن يكون مدعومًا في IE.

العب حولي:-

border-radius: 10px 10px 10px 10px

أود أن أقترح إما استخدام Jquery UI (يمكنك إنشاء سمة خاصة بك)http://jqueryui.com/themeroller/

أو

CSS3http://webdesignerwall.com/tutorials/css3-gradient-buttons

لن يعمل CSS3 في IE.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow