السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.
- نبحث عن
- ونضع هذا الكود فوقه
@media only screen and (min-width: 993px) {
.container {
width: 85%;
}
}
@media only screen and (min-width: 993px) {
.container {
width: 70%;
}
}
@media only screen and (min-width: 601px) {
.container {
width: 85%;
}
}
.container {
margin: 0 auto;
max-width: 1280px;
width: 90%;
}
.btn-space{
text-align: center;
}
.ripple {
text-align: center;
display: inline-block;
padding: 8px 30px;
border-radius: 2px;
letter-spacing: .5px;
border-radius: 2px;
text-decoration: none;
color: #fff;
overflow: hidden;
position: relative;
z-index: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.ripple:hover {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.4);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.animate {
-webkit-animation: ripple 0.55s linear;
-moz-animation: ripple 0.55s linear;
-ms-animation: ripple 0.55s linear;
-o-animation: ripple 0.55s linear;
animation: ripple 0.55s linear;
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
}
}
@-moz-keyframes ripple {
100% {
opacity: 0;
-moz-transform: scale(2.5);
}
}
@-o-keyframes ripple {
100% {
opacity: 0;
-o-transform: scale(2.5);
}
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
.red {
background-color: #F44336;
}
.pink {
background-color: #E91E63;
}
.blue {
background-color: #2196F3;
}
.cyan {
background-color: #00bcd4;
}
.teal {
background-color: #009688;
}
.yellow {
background-color: #FFEB3B;
color: #000;
}
.orange {
background-color: #FF9800;
}
.brown {
background-color: #795548;
}
.grey {
background-color: #9E9E9E;
}
.black {
background-color: #000000;
}
- ثم نبحث عن
- ونضع هذا الكود فوقه
- و اخيرا ضع هذا الكود في المكان الذي تريده
- للمعاينة
الكلمات المفتاحية :
ازرار
اضافات بلوجر
بلوجر
Written by you: Technical blogger AMER BACHIR
URL Of Post:
HTML Code Of Post:
0 التعليقات لموضوع "ازرار رائعة لبلوجر بتأثير متريال ديزاين كتبها: المدون التقني - الخبير عامر بشير"
ما يلفظ من قول إلا وعليه رقيب
الابتسامات الابتسامات