stylish button boder maker online

<center> <div class="output"> <div id="blob"></div><br> </div></div> <input style="display :none "type="number"value="200" id="blob-height"></div><div> <input style="display :none "type="number"id="blob-width" value="200" ></div></div><br> <center> <label class="t">radiusOne</label> <span class="tt"id="selectedValue1">30</span> <input class="r"type="range" value="30"> <label class="t">radiusTwo</label> <span class="tt"id="selectedValue1">80</span> <input class="r"type="range" value="80"> <label class="t">radiusThree</label> <span class="tt"id="selectedValue1">100</span> <input class="r"type="range" value="100"> <label class="t">radiusFour</label> <span class="tt"id="selectedValue1">40</span> <input class="r"type="range" value="40"></div><br><br> <input class="result"type="text"id="css-code"readonly></code><br><br> <button class="b2"id="copy">Copy</button> </div> <style> .output{ background-color: #EEF3F8; width: 100%; min-height: 250px; padding: 20px 0; overflow: hidden; border-radius: 5px; position: relative; display: grid; place-items: center; }#blob{ height: 300px; width: 300px; background: linear-gradient( #FF00D2,#9902AA); box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }#bolb:hover { background: linear-gradient( #2B7D0F,#30F917);#42445A }.t{ font-weight :bold ; font-family: Roboto Slab; color :#000D6E; }.tt{ font-weight :bold ; font-family: Roboto Slab; color :#FF0079; }.z{ display :none ; }.r { width: 80%; margin: 20px; -webkit-appearance: none; appearance: none; height: 5px; background: #000D6E ; outline: none; border-radius :5px ; box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }.r::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #00D904; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; cursor: pointer; border-radius: 50%; background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%); }.result{ background-color :#000000 ; width :100%; height :100px ; border :2px solid #ffffff ; border-radius :10px ; color :white ; padding :10px ; font-family: Playfair Display SC; font-size: medium; box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }.b2{ background-color :#00F95F ; padding :10px 40px ; border :1px solid #ffffff ; border-radius :5px ; color :white ; font-weight :bold ; font-family: Roboto Slab; box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }.b2:hover { background-color :#FF0076; transform: scale(1.04); transition: all 0.10s; }.b2:active { background-color :#1500FF; } </style> <script> let outputCode = document.getElementById("css-code"); let sliders = document.querySelectorAll("input[type='range']"); sliders.forEach(function(slider) { slider.addEventListener("input", createBlob); }); let inputs = document.querySelectorAll("input[type='number']"); inputs.forEach(function(inp) { inp.addEventListener("change", createBlob); }); function createBlob() { let radiusOne = sliders[0].value; let radiusTwo = sliders[1].value; let radiusThree = sliders[2].value; let radiusFour = sliders[3].value; let blobHeight = inputs[0].value; let blobWidth = inputs[1].value; let borderRadius = `${radiusOne}% ${100 - radiusOne}% ${100 - radiusThree}% ${radiusThree}% / ${radiusFour}% ${radiusTwo}% ${100 - radiusTwo}% ${100 - radiusFour}%`; document.getElementById("blob").style.cssText = `border-radius: ${borderRadius}; height: ${blobHeight}px; width: ${blobWidth}px`; outputCode.value = `border-radius: ${borderRadius};` } document.getElementById("copy").addEventListener("click", function() { outputCode.select(); document.execCommand('copy'); alert('Code Copied'); }); createBlob(); </script> <script> const rangeInputs = document.querySelectorAll("input[type='range']"); const selectedValues = document.querySelectorAll("span"); rangeInputs.forEach((input, index) => { input.addEventListener("input", () => { selectedValues[index].textContent = input.value; }); }); </script>

• Newer

  stylish button boder maker online

• Older