السلام عليكم ورحمة الله تعالى وبركاته في هذا الشرح سوف اقدم لكم مجموعة من الأمثلة لمجموعة من أزرار روابط التحميل بشكل جميع وتفاعلي من خلال استعمال خاصية Hover في لغة CSS كل مثال من الأمثلة التي سأقدمها لكم يوجد تحتها مباشرة أكواد CSS التي ستحتاجها لتركيب اي مثال على روابط تحميل او روابط المعاينة في مدونتك او اي رابط تريد .
المثال 1 : Hover عادي باستعمال Background-color
أكواد تركيب المثال 1
<a class="btn1" href="#" target="_blank">المثال الأول 1</a><style>
.btn1{background-color:#0eb80e;color:#fff;padding:5px 10px;margin:5px;border-radius:5px;font-size:25px;font-weight:bolder;transition:.2s;text-shadow:1px 1px 1px #000;box-sizing:border-box}
.btn1:hover{background-color:#007000}
</style>المثال 2 : Hover بإستعمال Box-Shadow
أكواد تركيب المثال 2
<a class="btn2" href="#" target="_blank">المثال الثاني 2</a><style>
.btn2{padding:5px 10px;margin:5px;border-radius:5px;font-size:25px;font-weight:bolder;transition:.4s;text-shadow:1px 1px 1px #000;box-sizing:border-box;color:#fff;background-color:#1500a2;box-shadow:inset 4em 0 0 0 #2a0aff,inset -4em 0 0 0 #2a0aff}
.btn2:hover{box-shadow:inset 0 0 0 0 #2a0aff,inset 0 0 0 0 #2a0aff}
</style>المثال 3 : Hover بإستعمال Box-Shadow أيضا
أكواد تركيب المثال 3
<a class="btn3" href="#" target="_blank">المثال الثالث 3</a><style>
.btn3{padding:5px 10px;margin:5px;border-radius:5px;font-size:25px;font-weight:bolder;transition:.4s;text-shadow:1px 1px 1px #000;color:#fff;background-color:#990000;box-shadow:inset 0 3em 0 0 #ff0000,inset 0 -3em 0 0 #ff0000}
.btn3:hover{box-shadow:inset 0 0 0 0 #ff0000,inset 0 0 0 0 #ff0000}
</style>المثال 4 : Hover بإستعمالها على Before
أكواد تركيب المثال 4
<a class="btn4" href="#" target="_blank">المثال الرابع 4</a><style>
.btn4{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);position:relative;overflow:hidden;box-sizing:border-box;text-shadow:1px 1px 1px black;border-radius:5px;padding:5px 10px;margin:5px;font-size:25px;cursor:pointer;background:#03A9F4;color:#fff;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased}
.btn4::before{content:"";position:absolute;z-index:-1;left:100%;right:0;bottom:0;background:#673ab7;height:4px;-webkit-transition-property:left;transition-property:left;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.btn4:hover:before{left:0}
</style>المثال 5 : Hover بإستعمال Background-Position
أكواد تركيب المثال 5
<a class="btn5" href="#" target="_blank">المثال الخامس 5</a><style>
.btn5{display:inline-block;padding:5px 10px;margin:0 3px;box-shadow:0 0 2px #000;border-radius:5px;transition:500ms;font-weight:bolder;background-size:250%!important;background-position:0 300%!important;font-size:25px;color:#fff;text-shadow:1px 1px 1px #000;background:linear-gradient(270deg,#001780,#0065fb,#001780,#0065fb)}
.btn5:hover{background-position:100% 0!important}
</style>
شكرا لكم على القراءة واتمنى ان يكون الشرح قد اعجبكم وافادكم 💙
قدمت لكم في هذا الشرح 5 أمثلة إذا نال هذا الشرح إعجابكم وحاز على تفاعل كبير سأقوم بإضافة المزيد من الأمثلة او قد انشر موضوع آخر بأمثلة أكثر ان شاء الله
ردحذفتعليق تجريبي
حذف