يعتبر زرار التحميل أو الإنتقال لموقع أخر من أهم العلامات والدلائل على أناقة وجمال الشكل والطريقة في الموقع بل ويعتبر الزرار من عوامل لفت الإنتباه السريع والقوي بإتجاه الحصول على محتوى ما خارج موقعك أو الوصول لموقع أخر لذا فيجب على جميع أصحاب المواقع الإهتمام جداً بوجود زرار تحميل أو زرار إنتقال لموقع أخر بشكل جميل وجذاب.
لتكتمل الصورة بين محتوى جيد وكذلك إسلوب عرض وتنسيق متميز بوجود أحد تلك العوامل في نجاح شكل وإسلوب العرض وهو بوجود زرار حديث أنيق مميز ممتع بالشكل وبطريقة وآلية عمله مما يرفع من جودة موقعك وكذلك من مستوى تجربة المستخدم لموقعك.
وعليه فقد تم عمل مجموعة أزرار تتكون من 16 زرار بأشكال ومؤثرات متنوعة للغاية ويمكنك إختيار منها ما تريد وكذلك يمكنك إستخدام منها أكثر من زرار بنفس المقالة بدون أية مشكلات مما سيضيف لمقالتك عامل جديد من عوامل الأناقة والتنسيق الجيد والشكل الرائع وهو ما نطمح جميعاً إليه.
وقد يسأل البعض عن
أفضل كود زرار تحميل للمواقع؟
أفضل أكواد أزرار تحميل مجانية لموقعك؟
أفضل كود زرار تحميل بتأثيرات مميزة لموقعك؟
وهنا وفي هذا المقال ستجد الكثير من الأزرار التي سوف يعجبك منها زرار أو أكثر لتستخدمه بموقعك بكل سهولة وبساطة وبدون أية مشكلات فهو مجرد كود واحد فقط تضعه بأي مكان في مقالتك لتضع فقط الرابط الذي تريد بالكود دون أي تغيير أخر بكود الزرار لتجده كود سهل الإستخدام جداً وبسيط وبمميزات ومؤثرات رائعة وأنيقة للغاية.
يمكنك إختيار ما تريد من الأزرار التالية فكل زرار له معاينة حقيقية للزرار والكود الخاص بهذا الزرار أسفل المعاينة مباشرة وبعدها وأسفل معاينة الأزرار والأكواد سوف يكون هناك شرح تغيير الألوان بالأزرار لتتناسب مع موقعك وبالألوان التي تريد وكذلك تغييرات أخرى على حسب الحاجة ويمكنك مراسلتي شخصياً على حسابي بالفيسبوك إن أردت تعديل ما على أي كود يخص موقعك وهو غير موجود أو موجود بزرار ليس فيه الشكل الذي تريده لزرار أخر.
ولنبدأ بالأزرار وهي كما ترى معاينة الزرار والكود أسفله حتى يمكنك تجربة الزرار وبعدها أخذ الكود إن أعجبك شكل الزرار وطريقة التعامل معه والتأثيرات التي يحتويها الزرار وشكل التفاعل معه.
معاينة الزرار الأول
كود الزرار الأول
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn856">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn856{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 10px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease;
}
#btn856:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: scale(1.1);
}
#btn856 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn856 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار الثاني
كود الزرار الثاني
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn801">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn801{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 10px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn801:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: scale(1.1);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
}
#btn801 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn801 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار الثالث
كود الزرار الثالث
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn802">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn802{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 10px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , opacity 0.3s ease , transform 0.3s ease;
}
#btn802:hover{
background: linear-gradient(#ffdcef,#fff7fd);
opacity: 0.8;
transform: translate(0,-5px);
}
#btn802 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn802 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار الرابع
كود الزرار الرابع
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn803">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn803{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 10px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease;
}
#btn803:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: translate(0,-5px);
}
#btn803 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn803 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار الخامس
كود الزرار الخامس
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn804">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn804{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 20px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease;
}
#btn804:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: translate(0,-5px);
}
#btn804 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn804 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار السادس
كود الزرار السادس
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn805">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn805{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 20px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn805:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: scale(1.1);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
}
#btn805 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn805 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار السابع
كود الزرار السابع
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn806">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn806{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 50%;
cursor: pointer;
width: 100px;
height: 100px;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn806:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: scale(1.1);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
}
#btn806 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn806 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار الثامن
كود الزرار الثامن
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn807">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn807{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 2px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn807:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: scale(1.1);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
}
#btn807 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn807 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار التاسع
كود الزرار التاسع
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn808">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn808{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 20px;
border-color: #0f8356 #c02b06 #beca11 #111f9c;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn808:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: scale(1.1);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
}
#btn808 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn808 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار العاشر
كود الزرار العاشر
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn809">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn809{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 20px;
outline:1px solid rgb(69, 21, 83,0.3);
border-color: #e68a11 #0f8356 #c02b06 #beca11;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn809:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: scale(1.1);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
}
#btn809 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn809 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار 11
كود الزرار 11
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn810">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn810{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-bottom: 3px solid transparent;
border-radius: 20px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease , border-bottom 0.3s ease;
}
#btn810:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: scale(1.1);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
border-bottom:3px solid #aaa;
}
#btn810 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn810 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار 12
كود الزرار 12
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn811">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn811{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(45deg,#fff7fd 70%,#ffdcef 30%);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 20px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn811:hover{
background: linear-gradient(45deg,#ffdcef 70%,#fff7fd 30%);
transform: scale(1.1);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
}
#btn811 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn811 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار 13
كود الزرار 13
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn812">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn812{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(90deg,#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 20px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn812:hover{
background: linear-gradient(90deg,#ffdcef,#fff7fd);
transform: scale(1.1);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
}
#btn812 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn812 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار 14
كود الزرار 14
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn813">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn813{
background:linear-gradient(131deg,#fff7fd,#fff,#ffdcef);
animation: btnbordercolor953 10s 1s linear infinite;
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 20px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn813:hover{
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
background:linear-gradient(304deg,#fff7fd,#fff,#ffdcef);
transform: scale(1.05);
}
#btn813 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards , btnsvg428 10s 1s linear infinite;
margin-left: 5px;
}
#btn813 span{
margin-right: 5px;
}
@keyframes btnbordercolor953 {
0% {
border: 1px solid rgb(45, 115, 207,0.3);color: #451553;
}
50% {
border: 1px solid rgb(225, 0, 0,0.9);color: #6d5728;
}
100% {
border: 1px solid rgb(45, 115, 207,0.3);color: #451553;
}
}
@keyframes btnsvg428 {
0% {
fill:#451553;
}
50% {
fill:#6d5728;
}
100% {
fill:#451553;
}
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار 15
كود الزرار 15
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn814">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn814{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
transform: skew(7deg, 0deg);
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn814:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: skew(-7deg, 0deg);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
}
#btn814 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn814 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
معاينة الزرار 16
كود الزرار 16
<div dir="ltr" style="text-align: center;">
<a href="https://www.google.com" rel="nofollow"><button id="btn815">
<svg fill="#451553" height="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.-->
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
</path></svg>
<span>تحميل</span>
</button></a>
</div>
<style>
#btn815{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
text-decoration: none;
color: #451553;
background: linear-gradient(#fff7fd,#ffdcef);
border: 1px solid rgb(69, 21, 83,0.3);
border-radius: 20px;
cursor: pointer;
width: auto;
height: auto;
padding: 4px;
margin: 5px;
transform: matrix(1, 0, 0, 1, 0, 0);
transition: background 0.3s ease , transform 0.3s ease , box-shadow 0.3s ease;
}
#btn815:hover{
background: linear-gradient(#ffdcef,#fff7fd);
transform: matrix(1.1, 0, 0, 1, 0, 5);
box-shadow: 2px 2px 10px #edeeed , -2px -2px 10px #edeeed;
}
#btn815 svg {
animation: maybtn856anim 3s ease 0s infinite normal forwards;
margin-left: 5px;
}
#btn815 span{
margin-right: 5px;
}
@keyframes maybtn856anim {
20%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
</style>
والأن في حالة أردنا تغيير ألوان الزرار لأي ألوان أخرى علينا معرفة أنه يجب عليك إختيار لونين قريبين من بعض جداً أحدهما فاتح والأخر داكن قليلاً بشرط أن يكون اللون الداكن قليلاً يعتبر لون فاتح كذلك حتى لا يؤثر على وضوح كلمة تحميل وكذلك أيكونة التحميل.
علينا بالبداية كتابة العبارة " html color picker " في محرك البحث جوجل وبعدها نقوم بإختيار أي لونين فاتحين أحدهما فاتح جداً والأخر داكن قليلاً وقريبين جداً من بعض في اللون.
بعدها نقوم بالبحث في كود الزرار عن الجملة
background: linear-gradient(
ستجدها مكررة مرتين في المرة الأولى ستضع كود اللون الفاتح بعدها مباشرة بدلاً من كود اللون
#fff7fd
وبعدها تضع كود اللون الأخر الداكن قليلاً بدلاً من كود اللون
#ffdcef
ملاحظة عند التبديل لأكواد الألوان بأكواد أخرى عليك الدقة فلا تقوم بزيادة على الكود أو تضع كود الألوان الجديد ناقص بدون علامة # مثلاً أو حذف أي رمز بالكود مثل رمز الأقواس ( ) أو الفاصلة , حتى يكون التعديل صحيح.
وأما عن تعديل الجملة الثانية وتغيير الألوان بها سنقوم بتبديل ترتيب أكواد الألوان في تلك المرة أي نضع كود الألوان الثاني مكان الأول وكود الألوان الأول مكان الثاني بعد جملة البحث.
ولتفهم أكثر ستجد كودين الألوان بالأساس معكوسين بالجملة الثانية وهو ما ستقوم به بأكواد الألوان التي قمت بوضعها بالجملة الأولى أي أنك ستضع كود الألوان الثاني بالجملة الأولى في مكان كود الألوان الأول بالجملة الثانية وبنفس الشكل ستضع كود الألوان الأول بالجملة الأولى في مكان كود الألوان الثاني بالجملة الثانية.
أتمنى أن يكون الأمر سهل فقط ببعض التركيز ستجد الأمر سهل جداً ومع تجربة الزرار بعد التعديل ستتأكد من نجاح التعديل.
إستثناء في كود الزرار 14 عليك وضع كود اللون الأول بالجملة الأولى بمكان كود اللون الأول بالجملة الثانية وكود اللون الثالث بالجملة الأولى بكود اللون الثالث بالجملة الثانية ليظهر التعديل بالشكل الصحيح وأما عن كود اللون الثاني أتركه كما هو أو غيره كما يتناسب معك في الجملتين بنفس المكان ولا تغير أي شيء في كود الخانة deg لا تغير الأرقام ولا تعبث بها إطلاقاً.
وأما في حالة أردت تغيير لون كلمة تحميل وكذلك لون الأيكونة الأمر بسيط فقط عليك البحث عن الجملة
color:
وكذلك البحث عن الجملة
fill=
وإستبدال كود الألوان الذي يليها وهو الكود
#451553
بأي كود ألوان للون داكن جداً في حالة كان لونين الزرار ألوان فاتحة والعكس في حالة كان لونين الزرار ألوان داكنة جداً يكون لون كلمة تحميل ولون الأيكونة لون فاتح وهكذا.
وعليك الدقة حتى لا تحذف أو تغير أو تضيف أي رمز قد يخرب الكود تماماً وكذلك يرجى عمل كود واحد للون كلمة تحميل ولون الأيكونة للوصول لمظهر جيد وإحترافي للزرار.
ولوضع الرابط بزرار التحميل عليك فقط البحث عن الجملة
href="
وإستبدال الرابط الموجود
https://www.google.com
بأي رابط أخر تريد وضعه بالزرار
كذلك يمكنك جعل الزرار يفتح الرابط في صفحة جديدة وذلك بإستبدال الجملة
rel="nofollow"
بالجملة
rel="nofollow" target="_blank"
ويمكنك الزيادة في التعديلات كنوع من التعلم أو حتى لو لديك ولو قليل من المعرفة بالتعديل على أكواد مواقع الويب فيمكنك بكل حرية التعديل على الكود كما تريد.
وأتمنى بهذا أن أكون قد قمت بعمل تغطية كافية للتعديل على كود الزرار حتى يمكنك تعديله والإستفادة منه بموقعك.
الخلاصة
إن كنت صاحب موقع أو كاتب مقالات فيجب عليك أن تمتلك جميع أدوات التميز لموقعك ومقالاتك وعليه فمن ضمن تلك الأدوات أن يكون لديك كود زرار مميز وحديث وأنيق مناسب لموقعك يؤدي غرضه تماماً بشكل صحيح ويضيف مزيد من الجمال والتنسيق والترتيب لمقالاتك وموقعك وهو أمر ضروري لتتميز عن منافسيك في شكل الموقع وكذلك المحتوى وجميع الأدوات التي تضمن التميز لموقعك.
