ازرار رائعة لبلوجر بتأثير متريال ديزاين

ازرار رائعة لبلوجر بتأثير متريال ديزاين

ازرار رائعة لبلوجر بتأثير متريال ديزاين

اقرأ أيضا


ازرار رائعة لبلوجر بتأثير متريال ديزاين





  1. نبحث عن <b:skin/><[[
  2. ونضع هذا الكود فوقه

@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;
}

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




<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script >
$(function() {
    var ink, d, x, y;
    $(".ripple").click(function(e) {
        if ($(this).find(".ink").length === 0) {
            $(this).prepend("<span class='ink'></span>");
        }
        ink = $(this).find(".ink");
        ink.removeClass("animate");
        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }
        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;
        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animate");
    });
});
</script>

  1. و اخيرا ضع هذا الكود في المكان الذي تريده

<div class="container btn-space">
      <a class="ripple red" href="#">تحميل</a>
      <a class="ripple pink" href="#">تحميل</a>
      <a class="ripple blue" href="#">تحميل</a>
      <a class="ripple cyan" href="#">تحميل</a>
      <a class="ripple teal" href="#">تحميل</a>
      <a class="ripple yellow" href="#">تحميل</a>
      <a class="ripple orange" href="#">تحميل</a>
      <a class="ripple brown" href="#">تحميل</a>
      <a class="ripple grey" href="#">تحميل</a>
      <a class="ripple black" href="#">تحميل</a>
    </div> 

  1. للمعاينة

شاركه على :
عبدو تكنولوجي - Abdou Technologie

لبيهي عبد العالي من الجزائر احب أن نضع كل ما اعرف من معلومات حول الحاسوب ولا ابخل به عليكم فأرجوا ان لاتبخلوا علينا أيضا بمتابعتكم لمواضيعنا كما ان تعليقاتكم تهمنا وتزيد من عطائنا لكم وشكرا

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

انضم الينا