UI button selection type is a user interface design concept of mobile button selection that allows the user to switch between options by clicking/clicking on the button.
jquery select button with class, jquery select button by name, jquery select button by id, jquery button onclick, jquery button style, jquery button method
Social Sharing Buttons Plugin for VuePress
How to make use of it:
1. Create the HTML for the button choice UI.
<div class="concept-wrap" id="mainWrap"> <div class="tap"> <div class="wave"></div> </div> <div class="btn-wrap" id="btn"> <div class="btn-cnt" id="content"> <div class="cnt cnt-1"><p class="text">jQuery</p> <i class="icon">Any Arrow Icon Here</i> </div> <div class="cnt cnt-2"><p class="text">Script</p> <i class="icon">Any Arrow Icon Here</i> </div> <div class="cnt cnt-3"><p class="text">Net</p> <i class="icon">Any Arrow Icon Here</i> </div> <div class="cnt cnt-4"><p class="text">Example</p> <i class="icon">Any Arrow Icon Here</i> </div> </div> </div> </div>
2. The essential CSS/CSS3 styles for the button choice interaction.
.cnt, .btn-cnt { display: flex; justify-content: center; align-items: center; } .cnt, .btn-wrap, .concept-wrap { width: 200px; height: 70px; } .concept-wrap { position: relative; cursor: pointer; } .btn-wrap { cursor: pointer; position: absolute; background: #1462ff; border-radius: 12px; box-shadow: 0 6px 30px -10px #4a74c9; overflow: hidden; transform: translateX(0); } .btn-cnt { position: absolute; top: 0; right: 0; flex-direction: row; height: 70px; width: 800px; z-index: 9; } .cnt { justify-content: space-around; box-sizing: border-box; padding: 0 25px; } .cnt .text { text-align: left; font-size: 1.4em; margin-right: auto; color: #fff; } .cnt .icon { margin-top: 3px; color: #fff; } .tap { width: 140px; height: 140px; position: absolute; background: transparent; opacity: 0.4; top: calc(50% - 69px); right: -32px; border-radius: 50%; z-index: 4; display: flex; justify-content: center; align-items: center; z-index: 3; } .wave { width: 30px; height: 30px; background: #4784ff; border-radius: 50%; opacity: 0; } .wave-act { animation: t-wave 599ms cubic-bezier(0.77, 0.06, 0, 0.99) forwards; } @keyframes t-wave { 0% { width: 50px; height: 50px; opacity: 0; } 15% { opacity: 1; } 20% { width: 40px; height: 40px; } 50% { opacity: 0.9; } 80% { opacity: 0; } 100% { opacity: 0; width: 140px; height: 140px; } }
3. Load the wanted jQuery, jquery.transit, and jquery.bez libraries within the doc.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/jquery.transit.min.js"></script> <script src="/path/to/cdn/jquery.bez.js"></script>
4. The JavaScript (jQuery script) to allow the button choice interplay.
// Variables var btnSz = 200; var c = 0; var bezierEasing = 'cubic-bezier(.69,-0.49,0,1)'; var t1 = 299; var t2 = 1198; var bZ2 = 'cubic-bezier(.46,.56,0,.88)' $('#mainWrap').on('click', function() { c++; console.log(c); // Lock $('.lock').addClass('lock-on'); setTimeout(function() { $('.lock').removeClass('lock-on'); }, 1200); // Wave $('.wave').addClass('wave-act'); setTimeout(function() { $('.wave').removeClass('wave-act'); }, 1000); // Move Button setTimeout(function() { $('#btn').transition({ x: '+=10px' }, 289, bZ2, function() { $('#btn').transition({ x: '0px' }, 289, bZ2); }); }, 399); // Move Content setTimeout(function() { if (c <= 2) { $('#content').transition({ x: '+=220px' }, t1, bezierEasing, function() { $('#content').transition({ x: '-=20' }, 699, 'cubic-bezier(.25,.49,.2,1)'); }); } else if (c == 3) { $('#content').transition({ x: '+=220px' }, t1, bezierEasing, function() { $('#content').transition({ x: '-=20' }, 699, 'cubic-bezier(.25,.49,.2,1)'); }); setTimeout(function() { $('.cnt-1').css('order', '4'); $('#content').transition({ x: '0' }, 0); }, t2); } else if (c == 4) { $('#content').transition({ x: '+=220px' }, t1, bezierEasing, function() { $('#content').transition({ x: '-=20' }, 699, 'cubic-bezier(.25,.49,.2,1)'); }); setTimeout(function() { $('#content').transition({ x: '0' }, 0); $('.cnt-1').css('order', '0'); }, t2); c = 0; } }, 399) });
Button Selection Interaction, UI Button Selection Type Plugin/Github, jquery button function, jquery ui button
See Demo And Download
Official Website(coswise): Click Here
This superior jQuery/javascript plugin is developed by coswise. For extra advanced usage, please go to the official website.
Be First to Comment