أهلا بكم أعزائى ومتابعى عالم بلوجر جلبت لكم اليوم إضافة بسيطة وقديمة لكن بشكل مطور وهى إضافة أزرار المعاينة والتحميل بشكل جديد ملئ بالحركة الدرس سهل وبسيط اتمنى إن الشرح أفادكم :
شكل الأزرار:
شرح إضافة الأكواد :
- إبحث فى القالب عن هذا الوسم</head> ثم ضع هذا الكود فوقه
<style>
#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 60px;
width: 250px;
line-height: 50px;
padding: 0;
border-radius: 13px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #D62417;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #D62417;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -65px;
background-color: #F7F7F7;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #D62417;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 45px;
width: 50px;
top: 0;
left: 0;
transition: .5s;
border-radius: 5px;
}
.btn-slide2 span.circle2 {
background-color: #D62417;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 5px;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #D62417;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}
</style>ثم إحفظ القالب
- كيفية إضافة أزرار المعاينة فى الموضوع عليك الضغط على زر html فى الموضوع ثم ضع هذا الكود وإضغط على تأليف .
حمل كود html الخاص بالأزرار
المصدر البروفيسور الصغير