Cara Membuat Tombol Demo dan Unduh Material Design
Material design merupakan gaya desain terbaru dari Google yang memiliki prinsip desain menyerupai kertas pada kenyataanya. Kaprikornus harus mempunyai efek jikalau di sentuh, kedalaman layer dan punya bayangan.
Nah, pada kesempatan ini aku akan menawarkan referensi membuat tombol demo dan unduh dengan implementasi dari material desain dengan effect ripple.
Baca juga : Cara Membuat Tombol Demo dan Unduh Flat UI
Membuat Tombol Demo dan Unduh Material Design
Masuk Halaman Blogger > Template > klik Edit HTML lalu letakan instruksi CSS berikut sebelum instruksi ]]></b:skin> atau </style>
.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} Jika sudah, letakan instruksi jQuery berikut di atas instruksi </body>
<script type='text/javascript'> //<![CDATA[ $(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> Kemudian simpan template
Untuk penggunaanya, tambahkan instruksi HTML berikut di postingan pada mode HTML
<div class="btn-space"> <a class='ripple red' href="#">Demo</a> <a class='ripple blue' href="#">Download</a> </div>
Untuk pilihan warna yang lain, mampu diadaptasi dengan instruksi warna yang ada di CSS.
Sekian dulu sahabat artikelnya, bila ada saran & kritik silahkan masukan komentar dan supaya bermanfaat.
Post a Comment for "Cara Membuat Tombol Demo dan Unduh Material Design"