مقدمه :-
نقدم لكم ازرار cs3 لمدونات بلوجر يمكنك ان تستخدم لجميع الاحتياجات مثل ان تجعل هذه الازرار للتحميل او المعاينه او حتى وضعها للتوجه الى موقع اخر فهذه الازرار تعطي منظر رائع وجميل للمدونه وتجعل المدونه اكثر تنظيم وايضا تعد احد اسباب جذب الزوار لان الزائر بكل بساطه يريد ان يرى اشياء جيده ومعلومات قيمه ومفيده في داخل المدونه او التدوينه.طريقة الاضافه :
- توجه الي مدونتك
- ثم قم باختيار قالب ثم تحريرHTML
- ثم قم بالبحث عن الوسم ]]></b:skin>
- ثم قم باضافة هذه الاكواد فوقه
$purple : #512DA8;
$blue : #1976D2;
$l_orange : #FBC02D;
$brick : #FF5722;
@mixin buttonBG($bg) {
border: 2px solid $bg;
color: $bg;
&:hover {
background-color: $bg;
transition: all 0.3s ease-in-out;
}
}
.container{
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
height: 97vh;
.skewBtn{
width: 180px;
height: 80px;
outline: none;
cursor: pointer;
background: none;
transition: .5s;
font-size: 24px;
border-radius: 5px;
font-family: "Lato",sans-serif;
&:hover{
border: none;
color: white;
font-size: 28px;
transform:scale(1.1);
}
}
}
/* Buttons */
.purple{
@include buttonBG($purple);
}
.blue{
@include buttonBG($blue);
}
.lorange{
@include buttonBG($l_orange);
}
.brick{
@include buttonBG($brick);
}
لاستخدام الاكواد داخل التدوينه سوف تتوجه الى التدوينه التي تريد ان تظهر فيها الازرار وتضغط على HTML في اعلى التدوينه وتضيف اي من هذه الاكواد.
<div class="container">
<div class="container">
<snp class="skewBtn purple">Hello</button>
<button class="skewBtn blue">How are you</button>
<button class="skewBtn lorange">Today</button>
<button class="skewBtn brick">good ?</button>
</div>
</div>
تعليقات
إرسال تعليق