SASS Placeholder Mixin

PHOTO

Sat Feb 22 2025 09:15:04 GMT+0000 (Coordinated Universal Time)

/* PLACEHOLDER 
============================================= */

%btn {
    padding: 10px;
    color:#fff;
    curser: pointer;
    border: none;
    shadow: none;
    font-size: 14px;
    width: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

/* BUTTON MIXIN 
============================================= */

@mixin  btn-background($btn-background) {
    @extend %btn;
    background-color: $btn-background;
    &:hover {
        background-color: lighten($btn-background,10%);
    }
}

/* BUTTONS
============================================= */

.cta-btn {
    @include btn-background(green);
}

.main-btn {
    @include btn-background(orange);
}

.info-btn {
    @include btn-background(blue);
}

COPY

Save snippets that work from anywhere online with our extensions

Comments

CSS

@Sebhart

Color Variables with Transparency Qualitfying Based on Context SASS Import SASS Placeholder Mixin SASS Placeholder Class Name Contains ... diverse attribute selectors Element not only child First or last element General Sibling Combinator General sibling selector Sibling Selector Check attribute value hide empty elements list with not selector Not last child not pseudo class not-selector Only Child Selector pseudo-element "has" variou spseudo element selectors select link with no<a>-text css variables

SASS

@Sebhart

Color Variables with Transparency Qualitfying Based on Context SASS Import SASS Placeholder Mixin SASS Placeholder Variables for Selectors

#css #toggle #button

Neumorphism Toggle

.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);

#squarespace #button #hover #underline

Button to Underline on Hover

//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;}

#javascript #ripple #button #effect

Material design ripple effect

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);
    });
}

##ios ##swift #function ##buttonclick #button #click #tap #pressed

call function from cell on a button in cell click

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
}

#button #image #overlay

Image Block - Button Size

/* CHANGE IMAGE BUTTON SIZE */
.image-button, .image-button.sqs-dynamic-text {
    font-size: .8em !important;
  }

#undefined #button #html

Вставка кнопки на страничку



 <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>

#ios #swift #set #setbutton #setimageview #image #button

set Edit Button Position

    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)

    }

#powerapps #lookup #button #text #change

Change text value based on lookup results

If(IsBlank(LookUp('YouTube Resources', Title = TextBoxNew.Text)), "ADD", "UPDATE")

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

Hoverable dropdown

//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;
}

#whatsaap #button

whatsaap button sticky

<a href="https://api.whatsapp.com/send?phone=918010111177&text=Hi%20O2Cure%20Team,%20I%20need%20the%20free%20consultation%20for%20Air%20%20Purifier" class="whatsapp-button" target="_blank" style="position: fixed;  right: 15px; bottom: 15px;"><img src="https://i.ibb.co/VgSspjY/whatsapp-button.png" alt="botão whatsapp"></a>

#whatsaap #button

geo location

<select name="state_name" class="form-control" id="checkout-state" required=""><option value="">Select State</option><option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option><option value="Andhra Pradesh">Andhra Pradesh</option><option value="Arunachal Pradesh">Arunachal Pradesh</option><option value="Assam">Assam</option><option value="Bihar">Bihar</option><option value="Chandigarh">Chandigarh</option><option value="Chhattisgarh">Chhattisgarh</option><option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option><option value="Daman and Diu">Daman and Diu</option><option value="Delhi">Delhi</option><option value="Goa">Goa</option><option value="Gujarat">Gujarat</option><option value="Haryana">Haryana</option><option value="Himachal Pradesh">Himachal Pradesh</option><option value="Jammu and Kashmir">Jammu and Kashmir</option><option value="Jharkhand">Jharkhand</option><option value="Karnataka">Karnataka</option><option value="Kerala">Kerala</option><option value="Lakshadweep">Lakshadweep</option><option value="Madhya Pradesh">Madhya Pradesh</option><option value="Maharashtra">Maharashtra</option><option value="Manipur">Manipur</option><option value="Meghalaya">Meghalaya</option><option value="Mizoram">Mizoram</option><option value="Nagaland">Nagaland</option><option value="Orissa">Orissa</option><option value="Pondicherry">Pondicherry</option><option value="Punjab">Punjab</option><option value="Rajasthan">Rajasthan</option><option value="Sikkim">Sikkim</option><option value="Tamil Nadu">Tamil Nadu</option><option value="Telangana">Telangana</option><option value="Tripura">Tripura</option><option value="Uttarakhand">Uttarakhand</option><option value="Uttar Pradesh">Uttar Pradesh</option><option value="West Bengal">West Bengal</option></select>

#html #css #button

Isometric-ish Button

<div id="hs_cos_wrapper_widget_1606345913489" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><div class="b-columns b-columns--columns-left b-columns--no-spacing">
    <div class="b-columns__container scheme--darkv2">
        
        <div class="b-columns__columns" data-cols="3">
            
                <div class="b-columns__column">
                    <div class="h-wysiwyg-html">
                        <h6>It's out now</h6>
<h1 style="margin-top: 0;">All new Qt 6</h1>
<a href="/download?hsLang=en" class="c-btn" rel="noopener" target="_blank"><span>Download now</span></a> &nbsp; &nbsp; <a href="https://www.youtube.com/watch?v=TodEc77i4t4" class="c-btn--small" rel="noopener" target="_blank">Watch video</a>
                    </div>
                </div>
            
        </div>
    </div>
</div></div>

#javascript #innerhtml #button #onclick #html

Inner HTML JavaScript Of a Button that "onClick" Changes HTML Content

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!">"Click Me!"</button>

#javascript #innerhtml #button #onclick #html

JavaScript {innerHTML form} that creates a lightbulb picture with (separate) on and off switches

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

#javascript #innerhtml #button #onclick #html

JavaScript Changing the way HTML Works

//This is a bunch of JavaScript Code to be used in HTML

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

//This section follows the html tags up until <head> this goes in head & body both
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
//Add more body text here if you'd like finish up with footer possibly,
//   and close it all up


//This one is similar the the last except this one, JavaScript goes in the
// <body> instead of the <head> 
<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>


//This one is the External Version Of The Above Two
//  Make a file labeled "anything.js" {literally anything}
//    Insert This Inside
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
//Now you'll need to put something like this inside your .html document
<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>
//This ^^^ is the most essential of these lines in this example

// "Placing scripts in external files has some advantages:
//   * It separates HTML and code
//   * It makes HTML and JavaScript easier to read and maintain
//   * Cached JavaScript files can speed up page loads"
//The above notes quoted directly from :
<a href="https://www.w3schools.com/Js/js_whereto.asp">This Site</a>

SASS Placeholder Mixin

Save snippets that work from anywhere online with our extensions

Comments

More like this

CSS

SASS

Browse more snippets >>

SASS Placeholder Mixin

Save snippets that work from anywhere online with our extensions

Comments

More like this

CSS

SASS

Browse more snippets >>

Embed code snippet