يجب أن يحتوي كل موقع ويب و صفحة هبوط على زر «دعوة إلى إجراء» (Call to action، ويختصر إلى CTA) واضح. هذا يشجع المستخدِم على النقر على الحدث وتنفيذه، سواء كان ذلك لإجراء عملية شراء، أو بدء تجربة، أو إنشاء حساب.
لا توجد طريقة واحدة مفضلة لتصميم CTA ويمكنك استخدام العديد من الأنماط المختلفة، من التدرجات الكبيرة إلى الأزرار الطيفية، وكل شيء في الوسط. لكن هناك عوامل أخرى تؤثر أيضًا على سهولة الاستخدام مثل اللون والحجم والموضع. اخترنا في هذا المقال 10 تصاميم CTA ممتازة وكلها مصممة باستخدام CSS خالص. إذا كنت تبحث عن تحفيز لإنشاء تصاميم CTA، يلزمك البحث عن شيء في هذه المجموعة.
1- الزر العائم Floating Button
إليك أحد أكثر الأساليب الفريدة الغير شائعة على الويب. يمكن أن يصبح هذا الزر العائم عنصرًا أساسيًا لصفحات الهبوط التي تنسجم جيدًا مع التصميم. يستخدم ظل إسقاط CSS3 مع حركات مكررة لإنشاء التأثير العائم. كل هذا يعمل عبر CSS مما يجعل نسخه ونقله لمشروعك أسهل. بالتأكيد، تأثير التحويم (hover) باهت بعض الشيء، إلا أن تصميم الزر الفعلي نفسه عوض هذا البهتان. بالإضافة إلى أنه يمكنك دائمًا توسيع تأثير التحويم ليشمل حركات CSS3 أخرى إذا كنت ترغب في التفكير خارج الصندوق.
2- زر CTA الأخضر المدوَّر
ستجد الكثير من CTA مثل هذا في صفحات الهبوط التي تروج للعروض أو الكتب الإلكترونية. غالبًا ما يستخدمون تأثير الدائرة المرسومة يدويًا باللون الأحمر لكونه يُمتَزج في الصفحة ويبدو من الطبيعي النقر عليه.
ما يلفت النظر في هذا الزر الأخضر CTA هو تأثير تحريك الحوَمان؛ فهو يعمل على كل من الزر والتَّعرُجات الحمراء في الخلفية، هو ليس التأثير الذي تتخيله للوهلة الأولى، ولكن للحصول على أزرار CTA سهل وحقيقي وجذب الانتباه، عليك تجربة ذلك. ونظرًا لأن الزر يستخدم CSS خالصًا، يمكنك بسهولة تغيير نظام الألوان لمطابقة أي تصميم.
3- الزر المصمم عبر التصميم الماديّ (Material Button)
إذا كنت ترغب في العمل باستخدام التصميم الماديّ ل Google، فستحب مجموعة الأزرار الفريدة هذه. التصميم المادي هو تصميم مبنيٌ بنمط واحد، لكنه يوفر اثنين من التأثيرات هما: تحويم الفأرة والنقر. يستخدم الزر جزء من شيفرة SCSS / Sass لِشيفرة CSS، ولكن يمكنك تجميعه إلى CSS مباشرة من CodePen. يعمل ذلك على تسهيل نسخ و لصق الشيفرة للاستخدام الشخصي إذا لم تكن من محبي Sass.
تأثيرات الحركة تحاكي دليل تصميم Google، لذلك فإن هذه المجموعة رائعة لأي مشروع ويب مصمَّم بالتصميم المادي قد تقوم بإنشائه مستقبلًا.
4- أزرار إجراء الحدث الملونة
مجموعة الأزرار هذه الصغيرة والسهلة الإستخدام أُنشِأت من المطور Rohan Nair. يتم تحديد خيارات الألوان لتناسب تصميمك، فيمكنك دائمًا تغيير شِيفرة CSS. التأثير الحقيقي الجذاب هنا هو حركة النقرة التي تحرك الزر لِأسفل في الصفحة. هذا يوهم المستخدم بالعمق ويميز كل زر عن العناصر الأخرى في الصفحة. بالتأكيد هذا كله يستخدم CSS خالصًا، لذلك يسهل عليك تخصيصة ليناسب مشروعك.
5- زر التفاعل الصغير
إذا كنت تحب تأثيرات الحركة للأزرار، يمكنك إلقاء نظرة على هذه الأزرار الدقيقة التي صممها Phil Hoyt. فقد استُخدم فيها Font Awesome مع حركات CSS مخصصة لأيقونات الأسهم. عند تحويم الفأرة فوق أي زر، تختفي تسمية الزر وتبرز بدلًا منها أيقونته.
وفقًا لتصميم CTA الخاص بك، قد لا يكون هذا مناسبًا كما تريد، خاصةً إذا لم تتمكن من العثور على أيقونه لتمثيل سلوك الزر بوضوح. لكن إن كنت تستطيع عمل هذا في موقعك، فإن تأثير التحويم يلزم أيضًا لجذب الإنتباه.
6- الأزرار المحددة
هذه الأزرار المحددة متميزة عن غيرها، هي في الأساس لا تشبه أزرار CTA لكن مع وجود نص أكبر أو حجم زر أكبر، يمكن أن تكون هذه التصميمات الرائعة في المقدمة.
يستخدم كل زر دالة التحويل CSS translate مع ألوان مخصصة للخلفية لإنشاء تأثير الحدود. إنها تقنية معقدة إلى حد ما، ولكنها أفضل طريقة لتأثيرات حدود CSS على اعتبار أن حدود CSS العادية لن تعمل بنفس الشكل.
إن أحببت هذه التصاميم وقمت بتجْريبها، فستجد أنها تعمل بسلاسة في جميع متصفحات الويب الحديثة.
7- أنماط التدرج
لن تتفوق أزرار التدرج الكلاسيكي هذه عن غيرها أبدًا؛ إلا أنها تستخدم بشكل بارز في إطارات العمل الكبيرة مثل Bootstrap. باستخدام هذه الأزرار المتدرجة، يمكنك بسهولة تحديث التحويم والنقر على جميع الحركات مع الحفاظ على تنسيق الألوان. تستخدم أنماط التدريج LESS CSS الذي يجعل من الأسهل تغميق الألوان المتدرجة باستخدام النسب المئوية بدلاً من الشيفرات السداسية للألوان (hex codes)
يفضل البعض أزرار التدرج لأنها تتحد مع التصميم. وهذه بالتأكيد ليست الأنماط التدرجية الوحيدة التي ستجدها، لذا راجع موقع CodePen gradient button إن كنت تبحث عن المزيد.
8- YouTube CTA
إليك CTA فريد من نوعه يوجهك إلى فيديو YouTube. إنها شارة ثابتة في الركن السفلي الأيمن من الشاشة، ويمكنك أثناء التنقل رؤية الفيديو يظهر في أعلاها. إنه تصميم بسيط جدًا ولكنه لن يكون مفيدًا في كل صفحة ويب. يمكن استخدامه للترويج للتجارة، والإِطلاقات الجديدة، وبالطبع للتوصل لمواقع أخرى مثل YouTube.
ولكن إذا كنت تبحث عن زر CTA بارز لترويسة صفحتك، فلن يساعد هذا القالب كثيرًا. هي فكرة فريدة للغاية وتستحق أن تُحفظ إذا لزمك استخدام شيء مثل هذا مستقبلًا.
9- الأزرار المطوية للأسفل
من السهل إنشاء تحريكات ثلاثية الأبعاد للويب إن كنت تعرف ما تفعله. ولكن حتى لو كنت لا تفهم CSS، فمن السهل نسخ مقتطفات من الشيفرات ثلاثية الأبعاد مثل هذه الأزرار القابلة للطي التي صنعها Arnie McKinnis.
هي مبنية على أساس LESS، ولكن يمكنك تحويل ذلك إلى CSS عادي داخل CodePen. تعتمد الأزرار على تحويلات CSS لإنشاء التأثير ثلاثي الأبعاد الذي يظهر فقط عند التحويم بالفأرة.
إنه تصميم فريد من نوعه لأن CTA نفسها تحت الزر تقنيًا. يعرض التحويم بالفأرة فقط الرابط القابل للنَقر أسفله مما يجعل الزر الملون غلافًا رائعًا لجذب الانتباه. إن كنت تحب التأثير المتحرك ثلاثي الأبعاد، فعليك تجربة هذا على موقعك.
10- تحويم CSS الخالص
بدلاً من التركيز على تصميم أو نظام ألوان فريد من نوعه، توفر أزرار CSS الخالصة هذه الحركات المخصصة. تبدو جميعها مماثلة لأزرار الطيف النمطي حيث يكون لديك لون حدود ولا يوجد لون داخلي. ولكن أثناء التحويم بالفأرة، ستلاحظ أن نمط حد كل زر يتحول إلى شيء جديد. إنه تأثير خادع يصعب الوصول إليه، وليس شيئًا يمكنك التقاطه وتخصيصه دون بذل أي جهد. إن كنت تعرف طريقك نحو CSS، يجب أن تكتشف ذلك بسرعة.
11- CTA النابض
إذا كنت تتطلع إلى جذب انتباه الزوار باستمرار، فجرّب تصميم CTA النابض. يستخدم تأخير CSS لإنشاء تحريكًا نابضًا مع توهج خارجي. ولكن إذا تفحصت شيفرة CSS جيدًا، ستجد أن بإمكانك تغيير التحريك النابض ليكون أي شيء تريده. إنه متعدد الاستخدام، وبالطبع، يجب أن يمتزج بشكل جيد مع أي تصميم.
وأيضًا إذا نقرت على أيقونة "X" في الزاوية، فسَتتمكن من رؤية تأثير الحركة الكامل مرة أخرى. يؤدي هذا إلى تحميل الزر في واجهة عرض النافذة، حتى أنه يحتوي على حركة رائعة لتحميل الصفحة الأولى.
تستخدم معظم مواقع الويب أزرار CSS خالصة في هذه الأيام، لذا ليس من الصعب العثور على حركات تحبها وتنسخ شيفراتها للحصول على CTA.
ترجمة -وبتصرف- للمقال 10 Pure CSS Call-To-Action Button Collections لصاحبه Jake Rocheleau
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.