إنضم الى مجموعتنا في التلجرام لتبادل المعلومات إشترك الأن إنظم معنا
الصفحة الرئيسية
css

نماذج واكواد Html لبعض الاسهم للمدونات SVG

انتظر من فضلك 0 ثواني...
قم بالتمرير لأسفل وانقر فوق اذهب إلى الرابط للواجهة
تهاني! تم إنشاء الرابط
نماذج واكواد Html لبعض الاسهم للمدونات SVG

روابط وأزرار خيارات تصميم سهم لليسار ولليمين ولأعلى ولأسفل يتم تنفيذها بواسطة رسومات SVG الحلول باستخدام رسومات SVG لها ميزتان مهمتان:

من الأسهل بكثير ضبط حجم السهم (ما عليك سوى تغيير ارتفاع وعرض عنصر SVG)

من الأسهل قلبها في الاتجاه الصحيح.

سهم مستدير

مثال السهم مع الحدود والتدرج والظل

HTML 1

<div class="arrow">
	
<svg class="arrow-left-1" viewBox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"></path></svg>

<svg class="arrow-right-1" viewBox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"></path></svg>

<svg class="arrow-top-1" viewBox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"></path></svg>

<svg class="arrow-bottom-1" viewBox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"></path></svg>

</div>
منشورات قد تفيدك

Css 2

.arrow-left-1,
.arrow-right-1,
.arrow-top-1,
.arrow-bottom-1 {
    margin: 20px 8px;
    border-radius: 50%;
    border: 2px solid #337AB7;
    width: 80px;
    height: 80px;
    cursor: pointer;
    box-shadow: 0 0 12px 4px #BFE2FF;
    background: radial-gradient(#fff, #BFE2FF);
    cursor: pointer;
}
.arrow-left-1 path,
.arrow-right-1 path,
.arrow-top-1 path,
.arrow-bottom-1 path {
    fill: rgba(191, 226, 255, 0.6);
    stroke-width: 2;
    stroke: #337AB7;    
    transition: fill 0.5s ease-out;
}
.arrow-right-1 {
    transform: rotate(180deg);
}
.arrow-top-1 {
    transform: rotate(90deg);
}
.arrow-bottom-1 {
    transform: rotate(270deg);
}
.arrow-left-1:hover path,
.arrow-right-1:hover path,
.arrow-top-1:hover path,
.arrow-bottom-1:hover path {
    fill: #337AB7;
}

Preview 3

سهم سميك

في هذا المثال ، يكون السهم سميكًا جدًا ، لذا يمكن وضع مؤشر الماوس فوقه مباشرةً ، وليس على مساحته.

Html 1

<div class="tab-pane active" id="bl-2-1">	
<div class="arrow">	
	
<!-- Стрелка влево -->
<svg class="arrow-left-2" viewBox="0 0 9 14">
    <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z"></path>
</svg>

<!-- Стрелка вправо -->
<svg class="arrow-right-2" viewBox="0 0 9 14">
    <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z"></path>
</svg>

<!-- Стрелка вверх -->
<svg class="arrow-top-2" viewBox="0 0 9 14">
    <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z"></path>
</svg>

<!-- Стрелка вниз -->
<svg class="arrow-bottom-2" viewBox="0 0 9 14">
    <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z"></path>
</svg>		  
</div>

Css 2

.arrow-left-2,
.arrow-right-2,
.arrow-top-2,
.arrow-bottom-2 {
    margin: 20px 8px;
    width: 80px;
    height: 80px;
}
.arrow-left-2 path,
.arrow-right-2 path,
.arrow-top-2 path,
.arrow-bottom-2 path {
    fill: #BFE2FF;
    stroke-width: .6;
    stroke: #337AB7;    
    transition: fill 0.5s ease-out;
    cursor: pointer;
}
.arrow-left-2 {
    transform: rotate(180deg);
}
.arrow-top-2 {
    transform: rotate(270deg);
}
.arrow-bottom-2 {
    transform: rotate(90deg);
}
.arrow-left-2 path:hover,
.arrow-right-2 path:hover,
.arrow-top-2 path:hover,
.arrow-bottom-2 path:hover {
    fill: #337AB7;
}

Preview 3

سهم رفيع

أبسط مثال في المجموعة

Html 1

<div class="arrow">	
	
<!-- Стрелка влево -->
<svg class="arrow-left-3" viewBox="0 0 5 9">
    <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z"></path>
</svg>

<!-- Стрелка вправо -->
<svg class="arrow-right-3" viewBox="0 0 5 9">
    <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z"></path>
</svg>

<!-- Стрелка вверх -->
<svg class="arrow-top-3" viewBox="0 0 5 9">
    <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z"></path>
</svg>

<!-- Стрелка вниз -->
<svg class="arrow-bottom-3" viewBox="0 0 5 9">
    <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z"></path>
</svg>	
	
</div>

Css 2

.arrow-left-3,
.arrow-right-3,
.arrow-top-3,
.arrow-bottom-3 {
    margin: 20px 8px;
    width: 80px;
    height: 80px;
    cursor: pointer;
}
.arrow-left-3 path,
.arrow-right-3 path,
.arrow-top-3 path,
.arrow-bottom-3 path {
    fill: #337AB7;
    transition: fill 0.5s ease-out;
}
.arrow-left-3 {
    transform: rotate(180deg);
}
.arrow-top-3 {
    transform: rotate(270deg);
}
.arrow-bottom-3 {
    transform: rotate(90deg);
}
.arrow-left-3:hover path,
.arrow-right-3:hover path,
.arrow-top-3:hover path,
.arrow-bottom-3:hover path {
    fill: #000;
}

Preview 3

سهم مزدوج

Html 1

<div class="arrow">	
	

<!-- Стрелка влево -->
<svg class="arrow-left-5" viewBox="0 0 154 109">
	<symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
		<g>
			<polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "></polygon>
		</g>
		<g>
			<polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "></polygon>
		</g>
	</symbol>
	<use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)"></use>
</svg>

<!-- Стрелка вправо -->
<svg class="arrow-right-5" viewBox="0 0 154 109">
	<symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
		<g>
			<polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "></polygon>
		</g>
		<g>
			<polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "></polygon>
		</g>
	</symbol>
	<use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)"></use>
</svg>

<!-- Стрелка вверх -->
<svg class="arrow-top-5" viewBox="0 0 154 109">
	<symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
		<g>
			<polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "></polygon>
		</g>
		<g>
			<polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "></polygon>
		</g>
	</symbol>
	<use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)"></use>
</svg>

<!-- Стрелка вниз -->
<svg class="arrow-bottom-5" viewBox="0 0 154 109">
	<symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
		<g>
			<polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "></polygon>
		</g>
		<g>
			<polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "></polygon>
		</g>
	</symbol>
	<use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)"></use>
</svg>
	
</div>

Css 2

.arrow-left-5,
.arrow-right-5,
.arrow-top-5,
.arrow-bottom-5 {
    margin: 20px 8px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    fill: #337AB7; 
    transition: fill 0.5s ease-out, transform 0.3s ease-in;    
}
.arrow-left-5 {
    transform: rotate(90deg);
}
.arrow-right-5 {
    transform: rotate(270deg);
}
.arrow-top-5 {
    transform: rotate(180deg);
}
.arrow-left-5:hover,
.arrow-right-5:hover,
.arrow-top-5:hover,
.arrow-bottom-5:hover {
    fill: #BFE2FF;
    transform: scale(1.2);
}
.arrow-left-5:hover {
    transform: rotate(90deg) scale(1.2);
}
.arrow-right-5:hover {
    transform: rotate(270deg) scale(1.2);
}
.arrow-top-5:hover {
    transform: rotate(180deg) scale(1.2);
}

Preview 3

بالقياس مع هذه الأمثلة ، يمكنك استخدام أي سهم بتنسيق SVG. يمكنك تنزيلها من المواقع من موضوع الرموز المجانية. ثم قم بتدوير السهم في الاتجاه المطلوب ، واضبط الحجم واللون وإضافة تأثيرات التمرير.

اذهب إلى الرابط

لحظة من فضلك

نحن نتصفح الكثير من المواقع ونجلب لك المقالات التي تبحث عنها ونختصرها لك وهذه المقالات عند كتابتها ونشرها تاخذ مننا وقت وجهد وسهر كبير ونحن لا نطلب الكثير

لذلك نطلب منك تعليقا للمحتوي وطريقة نشره هل تعجبك ام لا نطلب منك الدعم ودعمك هو تعليقك لكي نستمر لذلك حبا وليس امر من فضلك اكتب تعليق

#css

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

إرسال تعليق

Cookie Consent
نحن نقدم ملفات تعريف الارتباط على هذا الموقع لتحليل حركة المرور وتذكر تفضيلاتك وتحسين تجربتك.
More Details
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
لقد اكتشفنا أنك تستخدم مكونًا إضافيًا لحظر الإعلانات في متصفحك.
يتم استخدام الإيرادات التي نكسبها من خلال الإعلانات لإدارة موقع الويب هذا، ونطلب منك إدراج موقعنا على الويب في القائمة البيضاء في مكون حظر الإعلانات الخاص بك.
Site is Blocked
Sorry! This site is not available in your country.