اضافة ازرار المعاينة والتحميل بشكل جميل

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

بدون مقدمات
طريقة الاضافة

ندخل للقالب ثم تحرير html
ونقوم بالتالي:

نبحث عن الوسم </head>
ثم نضيف فوقه هذا الكود

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

الى الخطوة الثانية
نبحث عن الوسم ]]></b:skin>

نضيف هذا الكود فوقه

#wrap {    margin: 20px auto;    text-align: center;}
#wrap br {    display: none;}
.btn-slide, .btn-slide2 {    position: relative;    display: inline-block;    height: 50px;    width: 200px;    line-height: 50px;    padding: 0;    border-radius: 50px;    background: #fdfdfd;    border: 2px solid #0099cc;    margin: 10px;    transition: .5s;}
.btn-slide2 {    border: 2px solid #efa666;}
.btn-slide:hover {    background-color: #0099cc;}
.btn-slide2:hover {    background-color: #efa666;}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {    right: 100%;    margin-right: -45px;    background-color: #fdfdfd;    color: #0099cc;}
.btn-slide2:hover span.circle2 {    color: #efa666;}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {    right: 40px;    opacity: 0;}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {    opacity: 1;    right: 40px;}
.btn-slide span.circle, .btn-slide2 span.circle2 {    display: block;    background-color: #0099cc;    color: #fff;    position: absolute;    float: right;    margin: 5px;    line-height: 42px;    height: 40px;    width: 40px;    top: 0;    right: 0;    transition: .5s;    border-radius: 50%;}
.btn-slide2 span.circle2 {    background-color: #efa666;}
.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {    position: absolute;    right: 90px;    text-align: center;    margin: 0 auto;    font-size: 16px;    font-weight: bold;    color: #30abd5;    transition: .5s;}
.btn-slide2 span.title2, .btn-slide2 span.title-hover2 {    color: #efa666;    right: 80px; }
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {    right: 80px;    opacity: 0;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {    color: #fff;}

الان ننتقل الى طريقة استعمال الازرار

عندما تكتب اي تدوينة واثناء ذلك اضف هذا الكود في html التي بجانب تأليف

<div id="wrap"><a href="#" class="btn-slide"> معاينة اضغط للمعاينة</a><a href="#" class="btn-slide2"> تحميل اضغط للتحميل</a></div>

نستبدل # برابط التحميل
نستبدل الكلمات العربية بما تريد

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

نقطة تصميم

اضافة ازرار المعاينة والتحميل بشكل جميل

SteveN

ليست هناك تعليقات:

إرسال تعليق