Button Explorations

Developer

Size

13,720 Kb

Views

18,216

Button Explorations Previews
Button Explorations HTML Codes
Button Explorations CSS Codes
Button Explorations JS Codes

How do I make an button explorations?

What is a button explorations? How do you make a button explorations? This script and codes were developed by Zane Riley on 27 November 2022, Sunday.

Button Explorations Previews

Button Explorations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button Explorations</title> <meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://use.typekit.net/vrt7jdx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/pjxgxz.css'>
<link rel='stylesheet prefetch' href='https://codepen.io/zaneriley/pen/2a4328df547d36df2fd314332a14d716?editors=110'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main> <section class="container pressed watermelon"> <div class="left"><img class="logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZpbmFsIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwMi43IDEwMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDIuNyAxMDIuMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRUI0OTM0IiBkPSJNNDMuMSwxMDAuOWMtMTYuNiwwLTQyLjYsMC00Mi42LDBWMS44YzAsMCwyMy45LDAsMzguOCwwYzEyLjgsMCwyMi45LDExLjMsMjIuOSwyNC43DQoJYzAsOS4zLTMuOCwxNy4yLTEyLDIwLjZ2MC4zYzkuNywwLjIsMjAuOCwxMiwyMC44LDI0LjdDNzAuOSw4OS42LDU3LjMsMTAwLjksNDMuMSwxMDAuOXogTTMyLjIsMTcuNGMtNSwwLTEzLjUsMC0xMy41LDB2MjQuMw0KCWMwLDAsOC40LDAsMTMuMSwwYzYuNCwwLDExLjItNS4yLDExLjItMTIuOUM0My4xLDIyLjksMzguNiwxNy40LDMyLjIsMTcuNHogTTM3LjEsNTcuMWMtNSwwLTE4LjQsMC0xOC40LDB2MjguNWMwLDAsMTMuNiwwLDE4LjMsMA0KCWM3LDAsMTQuMS00LjIsMTQuMS0xNC40QzUxLjEsNjEuOCw0My42LDU3LjEsMzcuMSw1Ny4xeiIvPg0KPHBhdGggZmlsbD0iI0ZBRDgxMyIgZD0iTTIyMSwxMDEuOWMtMjcsMC00Ny45LTIzLTQ3LjktNTBjMC0yNy43LDIxLjMtNTEuNSw0OS01MS41YzEyLjEsMCwyNC40LDYuMSwyNC40LDYuMXYyMC44DQoJYzAsMC05LTkuMi0yNC40LTkuMmMtMTcuMiwwLTMwLDE1LjEtMzAsMzIuMmMwLDE3LjcsMTIuMywzMy44LDMwLDMzLjhjMTAuNCwwLDE3LjktNC4yLDI0LjktOS4xYzAsMCwwLDEzLjgsMCwyMC4xDQoJQzI0NC4yLDk3LjIsMjMzLjcsMTAxLjksMjIxLDEwMS45eiIvPg0KPHBvbHlnb24gZmlsbD0iIzlGRDVCQSIgcG9pbnRzPSIxNTkuMSw2MS4zIDE1OS4xLDQyLjUgMTMwLjEsNDIuNSAxMzAuMSwxMy41IDExMS4zLDEzLjUgMTExLjMsNDIuNSA4Mi4zLDQyLjUgODIuMyw2MS4zIA0KCTExMS4zLDYxLjMgMTExLjMsOTAuMyAxMzAuMSw5MC4zIDEzMC4xLDYxLjMgIi8+DQo8cGF0aCBmaWxsPSIjQUFBQUFBIiBkPSJNMzM1LjcsMjAuM2MtNC4zLTYuOC0xMC4zLTExLjItMTkuMy0xMS4yYy0xMC4yLDAtMTcuOSw4LjItMTcuOSwxOC4xUzMwOCw0MS4zLDMxNS43LDQ1bDE4LjEsOS40DQoJYzcuMiw0LjUsMTAuOCwxMC4zLDEwLjgsMTguOWMwLDE1LjctMTQuNCwyNy42LTI5LjcsMjcuNmMtMTMuMiwwLTIzLjUtOC4yLTI4LTIwLjRsNS4zLTIuNGM0LDEwLjEsMTEuNSwxNy4xLDIyLjksMTcuMQ0KCWMxMi41LDAsMjMuNC05LjgsMjMuNC0yMi40YzAtMTAuNy0xMS0xNS4yLTE5LjEtMTkuM2wtMTcuMS05LjFjLTYuMy0zLjktOS44LTkuNC05LjgtMTdjMC0xNC4xLDEwLjEtMjQsMjQuMy0yNA0KCWM5LjYsMCwxOC42LDUuMiwyMy4yLDEzLjNMMzM1LjcsMjAuM3oiLz4NCjxwYXRoIGZpbGw9IiNBQUFBQUEiIGQ9Ik00MjYsNDVWNC43aDZ2OTQuOWgtNnYtNDloLTU3Ljd2NDloLTZWNC43aDZWNDVINDI2eiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU0MS43LDUyLjFjMCwyNi43LTIwLjYsNDguNy00Ny4zLDQ4LjdjLTI2LjcsMC00Ny4zLTIyLTQ3LjMtNDguN2MwLTI2LjcsMjAuNC00OC43LDQ3LjMtNDguNw0KCUM1MjEuMSwzLjQsNTQxLjcsMjUuNSw1NDEuNyw1Mi4xeiBNNDUzLjIsNTIuMWMwLDIzLjQsMTcuNiw0My4xLDQxLjIsNDMuMWMyMy41LDAsNDEuMi0xOS44LDQxLjItNDMuMWMwLTIzLjQtMTcuNy00My4xLTQxLjItNDMuMQ0KCUM0NzAuOCw5LjEsNDUzLjIsMjguNyw0NTMuMiw1Mi4xeiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU2Mi43LDk5LjZoLTZWNC43aDE2LjdjNy40LDAsMTQuNiwwLjUsMjAuNSw1LjVjNS44LDQuOSw4LjYsMTIuMSw4LjYsMTkuNWMwLDYuOC0yLjYsMTQuNC03LjksMTguOA0KCWMtNS44LDUtMTMuNyw2LTIxLjIsNmgtMTAuN1Y5OS42eiBNNTczLjYsNDguOWM2LjIsMCwxMS43LTAuOCwxNi42LTUuMmM0LjItMy44LDYuMi04LjcsNi4yLTE0LjJjMC01LjktMi40LTExLjgtNy4yLTE1LjQNCgljLTQuOC0zLjctMTAuOC0zLjgtMTYuNi0zLjhoLTkuOXYzOC41SDU3My42eiIvPg0KPC9zdmc+DQo=" alt=""/><img class="product-photo" src="https://shopassets.britcdn.com/cache/a2/e7/a2e703e3f603341d48eec14f83d2f61c.jpg" alt=""/></div> <div class="right cta-module"> <input type="radio" name="variant-2" id="variant-single-2"/> <label class="variant-option" data-button="data-button" for="variant-single-2"><span class="label-price">$39.00</span><span class="label-variant">Kit Only</span></label> <input type="radio" name="variant-2" id="variant-bundle-2" checked="checked"/> <label class="variant-option" data-button="data-button" for="variant-bundle-2"><span class="label-price">$99.00</span><span class="label-variant">Class + Kit</span></label> <button class="primary" data-button="data-button">Add to Cart</button> <button class="secondary" data-button="data-button">Give as a Gift</button> <p class="multi-line">In this class, Rebecca will share tips, tricks and tidbits on what goes into her design <a href="">process</a> and where she finds inspiration for her ever-growing handbag collection.</p> <p class="single-line"> <a href="">Learn More →</a></p> </div> </section> <section class="container bubbles watermelon"> <div class="left"><img class="logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZpbmFsIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwMi43IDEwMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDIuNyAxMDIuMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRUI0OTM0IiBkPSJNNDMuMSwxMDAuOWMtMTYuNiwwLTQyLjYsMC00Mi42LDBWMS44YzAsMCwyMy45LDAsMzguOCwwYzEyLjgsMCwyMi45LDExLjMsMjIuOSwyNC43DQoJYzAsOS4zLTMuOCwxNy4yLTEyLDIwLjZ2MC4zYzkuNywwLjIsMjAuOCwxMiwyMC44LDI0LjdDNzAuOSw4OS42LDU3LjMsMTAwLjksNDMuMSwxMDAuOXogTTMyLjIsMTcuNGMtNSwwLTEzLjUsMC0xMy41LDB2MjQuMw0KCWMwLDAsOC40LDAsMTMuMSwwYzYuNCwwLDExLjItNS4yLDExLjItMTIuOUM0My4xLDIyLjksMzguNiwxNy40LDMyLjIsMTcuNHogTTM3LjEsNTcuMWMtNSwwLTE4LjQsMC0xOC40LDB2MjguNWMwLDAsMTMuNiwwLDE4LjMsMA0KCWM3LDAsMTQuMS00LjIsMTQuMS0xNC40QzUxLjEsNjEuOCw0My42LDU3LjEsMzcuMSw1Ny4xeiIvPg0KPHBhdGggZmlsbD0iI0ZBRDgxMyIgZD0iTTIyMSwxMDEuOWMtMjcsMC00Ny45LTIzLTQ3LjktNTBjMC0yNy43LDIxLjMtNTEuNSw0OS01MS41YzEyLjEsMCwyNC40LDYuMSwyNC40LDYuMXYyMC44DQoJYzAsMC05LTkuMi0yNC40LTkuMmMtMTcuMiwwLTMwLDE1LjEtMzAsMzIuMmMwLDE3LjcsMTIuMywzMy44LDMwLDMzLjhjMTAuNCwwLDE3LjktNC4yLDI0LjktOS4xYzAsMCwwLDEzLjgsMCwyMC4xDQoJQzI0NC4yLDk3LjIsMjMzLjcsMTAxLjksMjIxLDEwMS45eiIvPg0KPHBvbHlnb24gZmlsbD0iIzlGRDVCQSIgcG9pbnRzPSIxNTkuMSw2MS4zIDE1OS4xLDQyLjUgMTMwLjEsNDIuNSAxMzAuMSwxMy41IDExMS4zLDEzLjUgMTExLjMsNDIuNSA4Mi4zLDQyLjUgODIuMyw2MS4zIA0KCTExMS4zLDYxLjMgMTExLjMsOTAuMyAxMzAuMSw5MC4zIDEzMC4xLDYxLjMgIi8+DQo8cGF0aCBmaWxsPSIjQUFBQUFBIiBkPSJNMzM1LjcsMjAuM2MtNC4zLTYuOC0xMC4zLTExLjItMTkuMy0xMS4yYy0xMC4yLDAtMTcuOSw4LjItMTcuOSwxOC4xUzMwOCw0MS4zLDMxNS43LDQ1bDE4LjEsOS40DQoJYzcuMiw0LjUsMTAuOCwxMC4zLDEwLjgsMTguOWMwLDE1LjctMTQuNCwyNy42LTI5LjcsMjcuNmMtMTMuMiwwLTIzLjUtOC4yLTI4LTIwLjRsNS4zLTIuNGM0LDEwLjEsMTEuNSwxNy4xLDIyLjksMTcuMQ0KCWMxMi41LDAsMjMuNC05LjgsMjMuNC0yMi40YzAtMTAuNy0xMS0xNS4yLTE5LjEtMTkuM2wtMTcuMS05LjFjLTYuMy0zLjktOS44LTkuNC05LjgtMTdjMC0xNC4xLDEwLjEtMjQsMjQuMy0yNA0KCWM5LjYsMCwxOC42LDUuMiwyMy4yLDEzLjNMMzM1LjcsMjAuM3oiLz4NCjxwYXRoIGZpbGw9IiNBQUFBQUEiIGQ9Ik00MjYsNDVWNC43aDZ2OTQuOWgtNnYtNDloLTU3Ljd2NDloLTZWNC43aDZWNDVINDI2eiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU0MS43LDUyLjFjMCwyNi43LTIwLjYsNDguNy00Ny4zLDQ4LjdjLTI2LjcsMC00Ny4zLTIyLTQ3LjMtNDguN2MwLTI2LjcsMjAuNC00OC43LDQ3LjMtNDguNw0KCUM1MjEuMSwzLjQsNTQxLjcsMjUuNSw1NDEuNyw1Mi4xeiBNNDUzLjIsNTIuMWMwLDIzLjQsMTcuNiw0My4xLDQxLjIsNDMuMWMyMy41LDAsNDEuMi0xOS44LDQxLjItNDMuMWMwLTIzLjQtMTcuNy00My4xLTQxLjItNDMuMQ0KCUM0NzAuOCw5LjEsNDUzLjIsMjguNyw0NTMuMiw1Mi4xeiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU2Mi43LDk5LjZoLTZWNC43aDE2LjdjNy40LDAsMTQuNiwwLjUsMjAuNSw1LjVjNS44LDQuOSw4LjYsMTIuMSw4LjYsMTkuNWMwLDYuOC0yLjYsMTQuNC03LjksMTguOA0KCWMtNS44LDUtMTMuNyw2LTIxLjIsNmgtMTAuN1Y5OS42eiBNNTczLjYsNDguOWM2LjIsMCwxMS43LTAuOCwxNi42LTUuMmM0LjItMy44LDYuMi04LjcsNi4yLTE0LjJjMC01LjktMi40LTExLjgtNy4yLTE1LjQNCgljLTQuOC0zLjctMTAuOC0zLjgtMTYuNi0zLjhoLTkuOXYzOC41SDU3My42eiIvPg0KPC9zdmc+DQo=" alt=""/><img class="product-photo" src="https://shopassets.britcdn.com/cache/a2/e7/a2e703e3f603341d48eec14f83d2f61c.jpg" alt=""/></div> <div class="right cta-module"> <input type="radio" name="variant-3" id="variant-single-3"/> <label class="variant-option" data-button="data-button" for="variant-single-3"><span class="label-price">$39.00</span><span class="label-variant">Kit Only</span></label> <input type="radio" name="variant-3" id="variant-bundle-3" checked="checked"/> <label class="variant-option" data-button="data-button" for="variant-bundle-3"><span class="label-price">$99.00</span><span class="label-variant">Class + Kit</span></label> <button class="primary" data-button="data-button">Add to Cart</button> <button class="secondary" data-button="data-button">Give as a Gift</button> <p class="multi-line">In this class, Rebecca will share tips, tricks and tidbits on what goes into her design <a href="">process</a> and where she finds inspiration for her ever-growing handbag collection.</p> <p class="single-line"> <a href="">Learn More →</a></p> </div> </section> <section class="container minimal watermelon"> <div class="left"><img class="logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZpbmFsIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwMi43IDEwMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDIuNyAxMDIuMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRUI0OTM0IiBkPSJNNDMuMSwxMDAuOWMtMTYuNiwwLTQyLjYsMC00Mi42LDBWMS44YzAsMCwyMy45LDAsMzguOCwwYzEyLjgsMCwyMi45LDExLjMsMjIuOSwyNC43DQoJYzAsOS4zLTMuOCwxNy4yLTEyLDIwLjZ2MC4zYzkuNywwLjIsMjAuOCwxMiwyMC44LDI0LjdDNzAuOSw4OS42LDU3LjMsMTAwLjksNDMuMSwxMDAuOXogTTMyLjIsMTcuNGMtNSwwLTEzLjUsMC0xMy41LDB2MjQuMw0KCWMwLDAsOC40LDAsMTMuMSwwYzYuNCwwLDExLjItNS4yLDExLjItMTIuOUM0My4xLDIyLjksMzguNiwxNy40LDMyLjIsMTcuNHogTTM3LjEsNTcuMWMtNSwwLTE4LjQsMC0xOC40LDB2MjguNWMwLDAsMTMuNiwwLDE4LjMsMA0KCWM3LDAsMTQuMS00LjIsMTQuMS0xNC40QzUxLjEsNjEuOCw0My42LDU3LjEsMzcuMSw1Ny4xeiIvPg0KPHBhdGggZmlsbD0iI0ZBRDgxMyIgZD0iTTIyMSwxMDEuOWMtMjcsMC00Ny45LTIzLTQ3LjktNTBjMC0yNy43LDIxLjMtNTEuNSw0OS01MS41YzEyLjEsMCwyNC40LDYuMSwyNC40LDYuMXYyMC44DQoJYzAsMC05LTkuMi0yNC40LTkuMmMtMTcuMiwwLTMwLDE1LjEtMzAsMzIuMmMwLDE3LjcsMTIuMywzMy44LDMwLDMzLjhjMTAuNCwwLDE3LjktNC4yLDI0LjktOS4xYzAsMCwwLDEzLjgsMCwyMC4xDQoJQzI0NC4yLDk3LjIsMjMzLjcsMTAxLjksMjIxLDEwMS45eiIvPg0KPHBvbHlnb24gZmlsbD0iIzlGRDVCQSIgcG9pbnRzPSIxNTkuMSw2MS4zIDE1OS4xLDQyLjUgMTMwLjEsNDIuNSAxMzAuMSwxMy41IDExMS4zLDEzLjUgMTExLjMsNDIuNSA4Mi4zLDQyLjUgODIuMyw2MS4zIA0KCTExMS4zLDYxLjMgMTExLjMsOTAuMyAxMzAuMSw5MC4zIDEzMC4xLDYxLjMgIi8+DQo8cGF0aCBmaWxsPSIjQUFBQUFBIiBkPSJNMzM1LjcsMjAuM2MtNC4zLTYuOC0xMC4zLTExLjItMTkuMy0xMS4yYy0xMC4yLDAtMTcuOSw4LjItMTcuOSwxOC4xUzMwOCw0MS4zLDMxNS43LDQ1bDE4LjEsOS40DQoJYzcuMiw0LjUsMTAuOCwxMC4zLDEwLjgsMTguOWMwLDE1LjctMTQuNCwyNy42LTI5LjcsMjcuNmMtMTMuMiwwLTIzLjUtOC4yLTI4LTIwLjRsNS4zLTIuNGM0LDEwLjEsMTEuNSwxNy4xLDIyLjksMTcuMQ0KCWMxMi41LDAsMjMuNC05LjgsMjMuNC0yMi40YzAtMTAuNy0xMS0xNS4yLTE5LjEtMTkuM2wtMTcuMS05LjFjLTYuMy0zLjktOS44LTkuNC05LjgtMTdjMC0xNC4xLDEwLjEtMjQsMjQuMy0yNA0KCWM5LjYsMCwxOC42LDUuMiwyMy4yLDEzLjNMMzM1LjcsMjAuM3oiLz4NCjxwYXRoIGZpbGw9IiNBQUFBQUEiIGQ9Ik00MjYsNDVWNC43aDZ2OTQuOWgtNnYtNDloLTU3Ljd2NDloLTZWNC43aDZWNDVINDI2eiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU0MS43LDUyLjFjMCwyNi43LTIwLjYsNDguNy00Ny4zLDQ4LjdjLTI2LjcsMC00Ny4zLTIyLTQ3LjMtNDguN2MwLTI2LjcsMjAuNC00OC43LDQ3LjMtNDguNw0KCUM1MjEuMSwzLjQsNTQxLjcsMjUuNSw1NDEuNyw1Mi4xeiBNNDUzLjIsNTIuMWMwLDIzLjQsMTcuNiw0My4xLDQxLjIsNDMuMWMyMy41LDAsNDEuMi0xOS44LDQxLjItNDMuMWMwLTIzLjQtMTcuNy00My4xLTQxLjItNDMuMQ0KCUM0NzAuOCw5LjEsNDUzLjIsMjguNyw0NTMuMiw1Mi4xeiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU2Mi43LDk5LjZoLTZWNC43aDE2LjdjNy40LDAsMTQuNiwwLjUsMjAuNSw1LjVjNS44LDQuOSw4LjYsMTIuMSw4LjYsMTkuNWMwLDYuOC0yLjYsMTQuNC03LjksMTguOA0KCWMtNS44LDUtMTMuNyw2LTIxLjIsNmgtMTAuN1Y5OS42eiBNNTczLjYsNDguOWM2LjIsMCwxMS43LTAuOCwxNi42LTUuMmM0LjItMy44LDYuMi04LjcsNi4yLTE0LjJjMC01LjktMi40LTExLjgtNy4yLTE1LjQNCgljLTQuOC0zLjctMTAuOC0zLjgtMTYuNi0zLjhoLTkuOXYzOC41SDU3My42eiIvPg0KPC9zdmc+DQo=" alt=""/><img class="product-photo" src="https://shopassets.britcdn.com/cache/a2/e7/a2e703e3f603341d48eec14f83d2f61c.jpg" alt=""/></div> <div class="right cta-module"> <input type="radio" name="variant" id="variant-single"/> <label class="variant-option" data-button="data-button" for="variant-single"><span class="label-price">$39.00</span><span class="label-variant">Kit Only</span></label> <input type="radio" name="variant" id="variant-bundle" checked="checked"/> <label class="variant-option" data-button="data-button" for="variant-bundle"><span class="label-price">$99.00</span><span class="label-variant">Class + Kit</span></label> <button class="primary" data-button="data-button">Add to Cart</button> <button class="secondary" data-button="data-button">Give as a Gift</button> <p class="multi-line">In this class, Rebecca will share tips, tricks and tidbits on what goes into her design <a href="">process</a> and where she finds inspiration for her ever-growing handbag collection.</p> <p class="single-line"> <a href="">Learn More →</a></p> </div> </section>
</main>
<div class="design-options"> <fieldset class="colors">Colors <div class="inline"> <label for="Existing"> <input id="Existing" type="radio" name="colors" value="existing"/> Current </label> <label for="Watermelon"> <input id="Watermelon" type="radio" name="colors" value="watermelon" checked="checked"/> Watermelon </label> </div> </fieldset>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Button Explorations - Script Codes CSS Codes

::-moz-selection { background: #F9DAFF; text-shadow: none;
}
::selection { background: #F9DAFF; text-shadow: none;
}
[data-button] { display: inline-block; position: relative; padding: 1em; border: 0; border-radius: 0.16151rem; font-family: "Soleil", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1em; font-weight: 700; line-height: 1; text-align: center; cursor: pointer; overflow: hidden; z-index: 1; -ms-touch-action: manipulation; touch-action: manipulation; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; clip: rect(0, 0, 0, 0);
}
main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
main > * { margin-top: 0;
}
.container { width: calc(99.99% * 4/12 - 1em); max-width: 22.18611em; border: 1px solid grey;
}
.container::before { width: 100%; height: 1.44em; content: ""; display: block; top: 0; margin-bottom: 1em;
}
.left { padding: 0 1.44em; width: 100%; text-align: center;
}
img { width: 100%;
}
.right { width: 100%; padding: 0 1.44em 1.44em;
}
.right button { width: 100%;
}
.right [type='radio'] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0);
}
p { margin-left: auto; margin-right: auto; line-height: 1.5;
}
.variant-option { display: inline-block; width: calc(99.99% * 1/2 - 0.69444em); margin-right: 1em; margin-top: 0;
}
.variant-option > * { display: block;
}
.variant-option input { display: none;
}
.variant-option:last-of-type { margin: 0;
}
.variant-option .label-variant { font-weight: 300;
}
.design-options { position: fixed; bottom: 0em; background-color: #d7d7d7; width: 100%; z-index: 1;
}
fieldset { display: inline-block; font-weight: bold;
}
fieldset label { font-weight: 300;
}
.logo { margin-right: auto; margin-left: auto; width: 60%;
}
.multi-line a { text-decoration: none; background-repeat: repeat-x; background-position: 0 100%; background-size: 2px 2px;
}
.existing { border: 1px solid #88d0cf;
}
.existing:before { background-color: #88d0cf;
}
.existing .primary { background-color: #00a5b2; color: white;
}
.existing .secondary { background: none; border: 2px solid #00a5b2; color: #00a5b2;
}
.existing .variant-option { border: 2px solid #d7d7d7; background-color: white;
}
.existing [type='radio']:checked + .variant-option { border: 2px solid #B988BD; background: rgba(185, 136, 189, 0.2);
}
.existing .multi-line a { color: inherit; background-image: -webkit-linear-gradient(#fff 0%, #00a5b2 0%); background-image: linear-gradient(#fff 0%, #00a5b2 0%);
}
.existing .multi-line a:hover { color: #00a5b2;
}
.existing .single-line a { color: #00a5b2; text-decoration: none;
}
.existing .single-line a:hover { background-image: -webkit-linear-gradient(#fff 0%, #00a5b2 0%); background-image: linear-gradient(#fff 0%, #00a5b2 0%); background-repeat: repeat-x; background-position: 0 95%; background-size: 2px 2px;
}
.watermelon { font-weight: 200 !important; border: 1px solid #90E1CF; line-height: 1;
}
.watermelon:before { background-color: #90E1CF;
}
.watermelon .primary { background-color: #FD6E6E; color: white; font-weight: 200; letter-spacing: 0.01em; padding: 1em 1em calc(1em + 4px) 1em; box-shadow: inset 0 -4px #E54949;
}
.watermelon .primary:hover { background-color: #E54949;
}
.watermelon .primary:active { background-color: #FD6E6E; -webkit-transform: scale(0.98); transform: scale(0.98); box-shadow: inset 0 3px #E54949 !important; padding: calc(1em + 3px) 1em 1em 1em;
}
.watermelon .secondary { background: none; border: 2px solid #FF6464; color: #FF6464;
}
.watermelon .variant-option { border: 2px solid #d7d7d7; background-color: white;
}
.watermelon [type='radio']:checked + .variant-option { border: 2px solid #58C6C2; background: #D0E9E8;
}
.watermelon .multi-line a { color: inherit; text-decoration: none; background-image: -webkit-linear-gradient(#fff 0%, #FF6464 0%); background-image: linear-gradient(#fff 0%, #FF6464 0%);
}
.watermelon .multi-line a:hover { color: #FF6464;
}
.watermelon .single-line { text-align: right;
}
.watermelon .single-line a { color: #FF6464; text-decoration: none;
}
.watermelon .single-line a:hover { background-image: -webkit-linear-gradient(#fff 0%, #FF6464 0%); background-image: linear-gradient(#fff 0%, #FF6464 0%); background-repeat: repeat-x; background-position: 0 95%; background-size: 2px 2px;
}
.pressed [data-button]:active { -webkit-transform: scale(0.98); transform: scale(0.98);
}
.bubbles [data-button]:active { -webkit-transform: translateY(0.07789em); transform: translateY(0.07789em);
}
.pressed.watermelon [data-button], .bubbles.watermelon [data-button] { -webkit-transition: color 50ms ease-in-out, background-color 50ms ease-in-out, border-color 50ms ease-in-out; transition: color 50ms ease-in-out, background-color 50ms ease-in-out, border-color 50ms ease-in-out;
}
.pressed.watermelon .primary:hover, .bubbles.watermelon .primary:hover { background-color: #E54949;
}
.pressed.watermelon .primary:active, .bubbles.watermelon .primary:active { background-color: #E54949;
}
.pressed.watermelon .secondary:hover, .bubbles.watermelon .secondary:hover { border: 2px solid #fd0000; color: #fd0000;
}
.pressed.watermelon .secondary:active, .bubbles.watermelon .secondary:active { border: 2px solid #fd0000; color: #fd0000;
}
.pressed.watermelon .variant-option:hover, .bubbles.watermelon .variant-option:hover { border: 2px solid #91d9d7; background: #f3f9f9;
}
.pressed.watermelon .variant-option:active, .bubbles.watermelon .variant-option:active { border: 2px solid #45c0bb; background: #bfe1e0;
}

Button Explorations - Script Codes JS Codes

$('.colors input').on('click', function() { $('section') .removeClass('existing') .removeClass('watermelon') .addClass($('input[name="colors"]:checked').val());
});

Home Page	Home
Developer	Zane Riley
Username	zaneriley
Uploaded	November 27, 2022
Rating	3
Size	13,720 Kb
Views	18,216

Do you need developer help for Button Explorations?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zane Riley (zaneriley) Script Codes

Name	Size
Donation Prototype - v3 Multi-pay option	11,995 Kb
Halloween Pen	7,736 Kb
Callout Example	3,936 Kb
Fluid Type Demo with Grid	0 Kb
Splash Page with animated gradient and text clipping.	6,532 Kb
Landing Page Prototype	3,261 Kb
Michelle, submit your photography to Unsplash.	3,368 Kb
3d Shadow Prototype v2	4,448 Kb
A Pen by Zane Riley	2,854 Kb
Masking Gifs	12,900 Kb

Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Table Exercise	Fresco	9,585 Kb
BabyStore	Pablo-Ai	3,807 Kb
Portfolio Layout Flex	Lahvjal	3,489 Kb
3D-box	Parthviroja	2,346 Kb
Out of the blue	Giaco	2,537 Kb
Social.svg.min	Larsenwork	13,849 Kb
Hello People	Danburrows	2,365 Kb
CSS-Flexbox-Demo	Sstiglets	1,709 Kb
Loading...	Adamjacob	2,384 Kb
SVG Scalable Text	Said_FD	1,451 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!