How to add Squarespace Custom Button Advanced hover animation With CSS by jishaansinghal in 2022 1st time Here!

How to add Squarespace Custom Button Advanced hover animation With CSS by jishaansinghal in 2022 1st time Here!

Source Code:

Paste this code in the Custom CSS window

.cl-effect a {
  border: none !important;
  background-image:url(https://static1.squarespace.com/static/6189d8fa98db4e43d0a676a0/t/61badd63be49b2358c546cd3/1639636323403/speech-bubble-orange.png) !important;
  background-repeat: no-repeat;
  width: 200px;
  height: 71px;
  background-position: center center;
  padding: 10px 80px !important;
}


.cl-effect a span::before{
  color:#f19f53;
}
.cl-effect {
    width: 100%;
    z-index: 100;
    text-align: center;
}
.cl-effect a {
    display: inline-block;
    outline: none;
    text-decoration: none;
    font-family: Lato, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 12px;
    border: 2px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    text-align: center;
    overflow: hidden;
    z-index: 100;
}
.cl-effect a span {
    position: relative;
    display: inline-block;
    transition: transform 0.3s ease 0s;
    color: rgb(255, 255, 255);
}
.cl-effect a span::before {
    position: absolute;
    margin-top: 15px;
    top: 100%;
    content: attr(data-hover);
    font-weight: 400;
    transform: translate3d(0px, 0px, 0px);
}
.cl-effect a:hover span,
.cl-effect a:focus span {
    top: -15px;
    transform: translateY(-100%);
}
@media all {
    .cl-effect a span {
        color: rgb(0, 0, 0) !important;
    }
}
@media all {
    .cl-effect.lceffect span {
        text-transform: lowercase !important;
    }
}
@media all {
    .cl-effect a span {
        font-weight: bold;
        text-align: center;
        margin-top: 20px !important;
        margin-bottom: 30px !important;
        line-height: 4 !important;
        width: 200px !important;
    }
}
@media only screen and(max-width:640px){
  .cl-effect{
    margin-left:-20px !important;
  }
}

Paste this code in Code Block

<div class="cl-effect lceffect"><a href="mailto:joinus@gmail.com" data-gal="m_PageScroll2id" data-ps2id-offset="65"><span data-hover="joinus@gmail.com">joinus@gmail.com</span></a></div>

keywords:

squarespace, squarespace tutorial, squarespace css, squarespace css tutorial, squarespace custom css, squarespace hacks, custom css, custom css squarespace, customize squarespace, css hover effects, css tutorial, button hover, squarespace 7.1, how to use css in squarespace, web design, button hover effect, squarespace animation, css, lottie animation squarespace, somoy tv, buttons css, website design, hover effect, squarespace animation effects, squarespace tutorial 2020, squarespace image hover, squarespace image hover effect, button hover effect css, css animation, lottie animation, squarespace lottie, squarespace tips and tricks, jamuna tv, jamuna television, bangladeshi news channel, latest news, news from bangladesh, যমুনা নিউজ, যমুনা টেলিভিশন, যমুনা সংবাদ, jamuna news, jamuna songbad, jamuna channel, jamuna tv channel, latest news today, advanced squarespace, will myers, apps for rickshaw, rickshaw, dhaka news, national news, rickshaw apps, new apps for rickshaw, somoy news, somoy tv news update, somoy tv national news, somoy, bangla news, bangladeshi news, bangladesh news, latest bangla news, latest bangladeshi news, top bangla news, somoy tv news, latest somoy news, latest somoy tv news, bangladesh, squarekicker, squarespace plugins, squarespace extensions, custom code, custom design, no-code, website builder, template, square space, squarespace website, plugins, extensions, addons, integrations, plugins for squarespace, squarespace tips, squarespace 7.1 plugins, best squarespace plugins, plugins squarespace, #squarespaceplugins, best squarespace plugin, squarespace plugins 7.1, css buttons, adobe xd tutorial, caleredwards, caler edwards, ui design, ux design, ui/ux, interface, ui, ux, adobexd, adobe xd, xd, experience, prototype, adobe xd prototyping, adobe xd prototype, design and prototype, adobe, new adobe xd, adobe xd hover tutorial, adobe xd hover effect, xd hover, how to create a button hover in 2 minutes - adobe xd tutorial, adobe xd buttons, xd button tutorial, animated logo on hover squarespace, animated logo photoshop, photoshop tutorial, photoshop, squarespace image text overlay on hover, squarespace tutorial 2019, squarespace text over image, squarespace hover over image effect, squarespace hover effects text, squarespace 7.1 buttons, squarespace buttons, custom web buttons, webdevsimplified, css animations, css button animations, advanced css button, advanced css button hover effect, css button animation, css button animation effect, css hover animation, css transform, css animation effect, css border animation, css button effects, css button transform, css button hover slide, css button hover effect, css hover effect, css hover, button hover animation, css button, change image on hover squarespace, image hover squarespace, image hover effect squarespace, squarespace image, squarespace css tricks, squarespace css customization, unbox therapy, unboxtherapy, tech, technology, gadgets, gadget, unboxing, review, unbox, therapy, new, youtube, realme gt 2 pro, realme, gt 2 pro, realme gt, smartphone, smartphones, squarespace animation plugin, animations squarespace, adobe after effects, adobe after effects animation, bodymovin after effects, bodymovin after effects tutorial, top css button hover effects, css top buttons, css buttons hover effects, top 10 cool hover effect on buttons in html & css, 10 cool css buttons ideas and inspirations, top css effects, css top button hover effects, css top button animation effects, css animation effects, css creative button hover effects, css creative button animation effects, cool css button effects, css button animation effects, top css button, css hover & animation effects, animated splash screen squarespace, squarespace splash page, preloader animation squarespace, css effects, css button hover effects, button hover effect using css, cool button hover effect html css, button hover effects css, css animation tutorial, css buttons with nice animation effects, button hover animation css, css effects with source code, css effects 2020, css effects with code, navigation menu, squarespace design, squarespace text animation, squarespace text color, squarespace text colour, squarespace text on hover, text animation squarespace, square text animation, squarespace how to, text block, animate text block squarespace, animate text on squarespace, animated text in squarespace, css animation squarespace, scroll animation squarespace, squarespace lottie animation tutorial, lottie squarespace, squarespace animation on scroll, hero banner parallax scrolling animation in squarespace 7.1, prallax, parallax webdesign, parallax, javascript, squarespace parallax effect, hero banner animation, hero banner parallax, parallax on scroll, animate on scroll, parallax animation on scroll, squarespace parallax on scroll, squarespace parallax, squarespace web design, schwartz-edmisten web design, image zoom squarespace squarespace tutorial, image zoom on hover squarespace, image zoom squarespace, zoom hover image css, suqarespace css, image zoom css, css zoom in when hover, floating, animation, carl johnson, squarespace: how to