Login / Join
Pure Css Material button with Ripple effect
submitted on 02/12/2018 by
Codicode
+ infos
Config
Embed
Share
Pure Css Material button with Ripple effect
by
Codicode
Pure Css Material button with Ripple effect
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="35b" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<button class="bntripple">Log-in</button>
CSS
body{ background-color:#000000; margin:20px; } /* Ripple effect */ .bntripple { background-position: center; transition: background 0.8s; } .bntripple:hover { background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f6 1%) center/15000%; } .bntripple:active { background-color: #6ebaf8; background-size: 100%; transition: background 0s; } /* Button style */ button { border: none; border-radius: 2px; padding: 10px 20px; font-size: 14px; cursor: pointer; color: white; background-color: #2299f4; box-shadow: 0 0 4px #777; outline: none; }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact