Snippets Collections
//HTML
<div class='dropdown'>
          <Link id='product' className='every' to='/products'>OUR PRODUCTS</Link>
           <div class='dropdown-content'>
            <Link to='autocadd'>AutoCadd</Link>
            <Link to='techset'>Techset</Link>
            <Link to='Endorse'>Endorse</Link>
           </div>
          </div>

//CSS

.dropdown{
    position: relative;
    display: inline-block;
}
.dropdown-content{
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content>*{
 color: black;
 padding: 12px 6px;
text-decoration: none;
 display: block;
}

.dropdown:hover .dropdown-content{
    display: block;
}
.dropdown-content>*:hover{
    background-color: #ddd;
}
If(IsBlank(LookUp('YouTube Resources', Title = TextBoxNew.Text)), "ADD", "UPDATE")
    func setEditButtonPosition() {
               let x1 = profileImageView.frame.maxX - profileImageView.layer.frame.height/4.5
        let y1 = profileImageView.frame.maxY - profileImageView.layer.frame.height/4.5
        
               statusImageView.frame.origin = CGPoint(x: x1, y: y1)

    }
​

 <script id='okdesk-script' type='text/javascript'>
        WebFormSettings = {
          btn_text: 'Экспресс вызов',
          btn_text_color: '#ffffff',
          btn_color: '#d1ba60',
          btn_border_color: '#00ff91',
          btn_position: 'bottom',
          account_name: 'zvr',
          site_url: 'https://zvr.okdesk.ru/'
        };

        var scriptTag = document.createElement('script');
        scriptTag.type = 'text/javascript';
        scriptTag.charset = 'utf-8';
        scriptTag.src = ('https://zvr.okdesk.ru/web-form/web-form.js');
        document.body.appendChild(scriptTag);
     </script>
/* CHANGE IMAGE BUTTON SIZE */
.image-button, .image-button.sqs-dynamic-text {
    font-size: .8em !important;
  }
cell.cellButton.tag = indexPath.row
            cell.cellButton.addTarget(self, action: #selector(yourFunc(sender:)), for: UIControl.Event.touchUpInside)
                                                            
@objc func yourFunc(sender: UIButton){
    let buttonTag = sender.tag
}
function ripple(el, opts = {}) {
    const time = opts.time || (+el.getAttribute("data-time") || 1000) * 3;
    const color = opts.color || el.getAttribute("data-color") || "currentColor";
    const opacity = opts.opacity || el.getAttribute("data-opacity") || ".3";
    const event = opts.event || el.getAttribute("data-event") || "click";
    el.style.overflow = "hidden";
    el.style.position = "relative";
    el.addEventListener(event, (e) => {
        if (el.disabled) return;
        var ripple_div = document.createElement("DIV");
        ripple_div.style.position = "absolute";
        ripple_div.style.background = `${color}`;
        ripple_div.style.borderRadius = "50%";
        var bx = el.getBoundingClientRect();
        var largestdemensions;
        if (bx.width > bx.height) {
            largestdemensions = bx.width * 3;
        } else {
            largestdemensions = bx.height * 3;
        }
        ripple_div.style.pointerEvents = "none";
        ripple_div.style.height = `${largestdemensions}px`;
        ripple_div.style.width = `${largestdemensions}px`;
        ripple_div.style.transform = `translate(-50%, -50%) scale(0)`;
        ripple_div.style.top = `${e.pageY - (bx.top + window.scrollY)}px`;
        ripple_div.style.left = `${e.pageX - (bx.left + window.scrollX)}px`;
        ripple_div.style.transition = `opacity ${time}ms ease, transform ${time}ms ease`;
        ripple_div.removeAttribute("data-ripple");
        ripple_div.style.opacity = opacity;
        el.appendChild(ripple_div);
        setTimeout(() => {
        ripple_div.style.transform = `translate(-50%, -50%) scale(1)`;
        ripple_div.style.opacity = "0";
        setTimeout(() => {
            ripple_div.remove();
        }, time);
        }, 1);
    });
}
//Small Button//
.sqs-block-button-element--small {  position:relative;   height: 60px; line-height: 60px;  text-align: center; transition: 0.5s;  padding: 0 20px;  cursor: pointer; -webkit-transition:0.5s;}.sqs-block-button-element--small:hover {  background-color: transparent;  border-color: transparent; color: #000000;} .sqs-block-button-element--small:hover:before{ transition-delay: .2s; }.sqs-block-button-element--small:before{  width: 0%; height:100%;  z-index: 3;   content:'';  position: absolute;  bottom:-1px;   left:0;  box-sizing: border-box;  transition: .2s;}.sqs-block-button-element--small:hover:before {  width: 100% !important;  transition: .7s; }.sqs-block-button-element--small:before { border-bottom: 2px solid #000000;}

//Medium Button//
.sqs-block-button-element--medium {  position:relative;   height: 60px; line-height: 60px;  text-align: center; transition: 0.5s;  padding: 0 20px;  cursor: pointer; -webkit-transition:0.5s;}.sqs-block-button-element--medium:hover {  background-color: transparent;  border-color: transparent; color: #000000;} .sqs-block-button-element--medium:hover:before{ transition-delay: .2s; }.sqs-block-button-element--medium:before{  width: 0%; height:100%;  z-index: 3;   content:'';  position: absolute;  bottom:-1px;   left:0;  box-sizing: border-box;  transition: .2s;}.sqs-block-button-element--medium:hover:before {  width: 100% !important;  transition: .7s; }.sqs-block-button-element--medium:before { border-bottom: 2px solid #000000;}

//Large Button//
.sqs-block-button-element--large {  position:relative;   height: 60px; line-height: 60px;  text-align: center; transition: 0.5s;  padding: 0 20px;  cursor: pointer; -webkit-transition:0.5s;}.sqs-block-button-element--large:hover {  background-color: transparent;  border-color: transparent; color: #000000;} .sqs-block-button-element--large:hover:before{ transition-delay: .2s; }.sqs-block-button-element--large:before{  width: 0%; height:100%;  z-index: 3;   content:'';  position: absolute;  bottom:-1px;   left:0;  box-sizing: border-box;  transition: .2s;}.sqs-block-button-element--large:hover:before {  width: 100% !important;  transition: .7s; }.sqs-block-button-element--large:before { border-bottom: 2px solid #000000;}
button:focus { /* Some exciting button focus styles */ }
button:focus:not(:focus-visible) {
  /* Undo all the above focused button styles
     if the button has focus but the browser wouldn't normally
     show default focus styles */
}
button:focus-visible { /* Some even *more* exciting button focus styles */ }
.neumorphism-toggle {

    position: relative;

    transition: transform .3s;

    transform: scale(var(--scale, 1)) translateZ(0);

    &:active {

        --scale: .6;

    }

    input {
9
        display: none;

        & + label {

            background: #fff;

            border-radius: 9px;

            padding: px 0 16px 20px;

            min-width: 208px;

            display: block;
16
            cursor: pointer;

            position: relative;

            box-shadow: -12px -12px 24px var(--light-shadow, transparent), 12px 12px 24px var(--shadow, transparent);
star

Thu Aug 04 2022 05:08:50 GMT+0000 (UTC) https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

#javascript #react #css #button #hover #dropdown
star

Sat Feb 05 2022 11:35:24 GMT+0000 (UTC) https://webmaker.app/app/

#undefined #button #html
star

Thu Feb 03 2022 08:33:59 GMT+0000 (UTC) https://christyprice.com/blog/change-image-button-size

#button #image #overlay
star

Thu Dec 16 2021 22:57:41 GMT+0000 (UTC) https://gist.github.com/Explosion-Scratch/735546e8bbe25b836193483853b1fba3

#javascript #ripple #button #effect
star

Fri Nov 12 2021 17:22:58 GMT+0000 (UTC) https://www.youtube.com/watch?v=GB_LBQ48oow&list=PLvVYrLE5_eds3eNOqxtUSG8VEwlG9otax&index=2

#squarespace #button #hover #underline
star

Wed Sep 08 2021 14:47:57 GMT+0000 (UTC) https://css-tricks.com/keyboard-only-focus-styles/

#css #a11y #form #button
star

Mon Mar 08 2021 20:21:12 GMT+0000 (UTC) https://codepen.io/aaroniker/pen/qBdZEjQ

#css #toggle #button

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension