Web Snippets – Get Some Quick Snippets

Buttons

Swipe Button

BUTTON

View CSS

View HTML


				.swipe-btn {
  display: inline-block;
  padding: 10px 43px;
  font-size: 17px;
  cursor: pointer;
  position: relative;
  color: #fff;
  text-align: center;
  z-index: 1;
  letter-spacing: 2px;
  overflow: hidden;
  border: 2px solid #fff;
  line-height: normal;
  background-color: #2735d5;
}
.swipe-btn::before {
  position: absolute;
  content: "";
  display: block;
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  background-color: rgb(14, 35, 72);
  z-index: -1;
  pointer-events: none;
  -webkit-transition: all .3s cubic-bezier(.77,0,.175,1);
  transition: all .3s cubic-bezier(.77,0,.175,1);
}
.swipe-btn:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}
.swipe-btn:hover {
  animation: popup 1.5s;
}
@keyframes popup {
  0% {
  transform: scale(1);
  }
  50% {
  transform: scale(.75);
  }
  75% {
  transform: scale(1.15);
  }
  100% {
  transform: scale(1);
  }
}


					<div class="swipe-btn">
  BUTTON
</div>

Pulse Button

BUTTON

View CSS

View HTML


				.pulse-btn{
  cursor:pointer;
  text-align: center;
  padding: 12px 25px;
  color: #fff;
  border-radius: 5px;
  background: #2735d5;
  box-shadow: 0 0 0 0 rgba(230, 237, 255, 0.8);
  animation: pulsing 1.72s infinite cubic-bezier(0.66, 0, 0, 1);
}   
    
@keyframes pulsing {
  to {
	  box-shadow: 0 0 0 30px rgba(255, 249, 230, 0);
  }
}


					<div class="pulse-btn">
  BUTTON
</div>

Button Bars

BUTTON

View CSS

View HTML


				/* Resource - https://codepen.io/abdelRhman345/pen/PXMmdv */
.btn-bars {
    position: relative;
    display: block;
    text-transform: uppercase;
    padding: 10px 20px;
    text-decoration: none;
    color: #262626;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 600;
    transition: .5s;
    z-index: 1;
}
.btn-bars:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 2px solid #262626;
    border-bottom: 2px solid #262626;
    transform: scaleY(2);
    opacity: 0;
    transition: .3s;
}
.btn-bars:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #262626;
    transform: scale(0);
    opacity: 0;
    transition: .3s;
    z-index: -1;
}
.btn-bars:hover {
	color: #fff;
}
.btn-bars:hover:before {
    transform: scaleY(1);
    opacity: 1;
}
.btn-bars:hover:after {
    transform: scaleY(1);
    opacity: 1;
}


					<a class="btn-bars">BUTTON</a>

Double Bubble Button

BUTTON

View CSS

View HTML


				.double-bubble-btn {
    position: relative;
    border-radius: 10px;
    background: #f2f2f2;
	text-decoration:none;
	cursor: pointer;
}
.clip-bubble-1 {
    position: absolute;
    clip-path: circle(30px at 7% 8%);
    transition: all 1s ease;
    top: 0;
    border-radius: 5px;
    background: #e14237;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.clip-bubble-2 {
    position: absolute;
    clip-path: circle(35px at 95% 95%);
    transition: all 1s ease;
    top: 0;
    border-radius: 5px;
    background: #3d6be1;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.double-bubble-btn-text {
    font-weight: bold;
    font-size: 20px;
    position: relative;
    width: 160px;
    margin: 0 auto;
    padding: 10px 35px;
    color: #353535;
    z-index: 10;
    transition: all .2s ease-in-out;
}
.double-bubble-btn:hover .clip-bubble-1 {
	clip-path: circle(80%);
} 
.double-bubble-btn:hover .clip-bubble-2 {
	clip-path: circle(65% at 90% 80%);
}
.double-bubble-btn:hover .double-bubble-btn-text {
	color: #fff;
}


					<a class="double-bubble-btn">
  <div class="double-bubble-btn-text">
    BUTTON
  </div>
  <div class="clip-bubble-1"></div>
  <div class="clip-bubble-2"></div>
</a>

Bubble Button

BUTTON

View CSS

View HTML


				.clip-btn {
  position: relative;
  background: rgb(61, 90, 250);
  width: 150px;
  height: 50px;
  text-decoration: none;
  cursor: pointer;
}
.clip-bg {
  clip-path: circle(20px at 5px 5px);
  transition: all 1s ease;
  border-radius: 5px;
  background: rgb(25, 60, 199);
  height: 100%;
  width: 100%;
}
.clip-btn:hover .clip-bg {
  clip-path: circle(100%);
}
.clip-btn-text {
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


					<a href="#" class="clip-btn">
  <div class="clip-bg"></div>
  <div class="clip-btn-text">
    BUTTON
  </div>
</a>

Slide Up Social Button

Instagram

View CSS

View HTML


				.s-box {
    width: 30px;
    height: 25px;
    padding: 5px;
    position: relative;
    cursor: pointer;
    transition: 300ms ease;
	background:#0e4d92;
	padding:20px
}
.socials a .icon {
    height: 20px;
    width: 20px;
}
.icon, .name {
    text-align: center;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
}
.s-box .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: 250ms ease;
}
.s-box .name {
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 250ms ease;
    width: max-content;
	font-size: 20px;
}
.s-box:hover {
    width: 150px;
}
.s-box:hover:hover .icon {
    opacity: 0;
    top: 30%;
}
.s-box:hover:hover .name {
    opacity: 1;
    top: 50%;
}
/* IG Icon */
.gg-instagram {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    border: 2px solid transparent;
    box-shadow: 0 0 0 2px;
    border-radius: 4px;
    width: 20px;
    height: 20px
}
.gg-instagram::after,
.gg-instagram::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}
.gg-instagram::after {
    border: 2px solid;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    top: 3px
}
.gg-instagram::before {
    border-radius: 3px;
    width: 2px;
    height: 2px;
    background: currentColor;
    right: 1px;
    top: 1px
}


					<a>
  <div class="s-box">
    <i class="icon gg-instagram"></i>
    <div class="name">Instagram</div>
  </div>
</a>

Cards

Rotate Background Card

View CSS

View HTML


				.overlay-cards-1 {
	position: relative;
	padding: 30px;
	margin-bottom: 20px;
}
.card-bg-1 {
    position: absolute;
    background: #4a92ea;
    transform: translate(-65px, 5px) rotateZ(45deg);
    z-index: 1;
    transition: all 1s ease;
    transform-origin: center;
}
.card-content-1 {
    position: relative;
    z-index: 10;
    background: #264e80;
	transition: all .8s ease;
    background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
    background-size: cover;
	box-shadow: 0 0 0 #154b8494;
}
.card-bg-1, .card-content-1 {
    width: 250px;
    height: 150px;
    border-radius: 10px;
}
.overlay-cards-1:hover .card-bg-1 {
	transform: translate(-90px, 0px) rotate(90deg);
}
.overlay-cards-1:hover .card-content-1 {
	box-shadow: 0 13px 15px #154b8494;
}


					<div class="overlay-cards-1">
    <div class="card-bg-1"></div>
    <div class="card-content-1"></div>
</div>

Double Bubble Card

Some text in this area here

View CSS

View HTML


				.plain-card-4 {
    position: relative;
    border-radius: 10px;
    background: #f2f2f2;
}
.clip-plain-card-container-4 {
    position: absolute;
    clip-path: circle(30px at 7% 8%);
    transition: all 1s ease;
    top: 0;
    border-radius: 5px;
    background: #e14237;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.clip-plain-card-container-2-4 {
    position: absolute;
    clip-path: circle(35px at 95% 95%);
    transition: all 1s ease;
    top: 0;
    border-radius: 5px;
    background: #3d6be1;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.outer-clip-details-4 {
    font-weight: bold;
    font-size: 35px;
    position: relative;
    margin: 0 auto;
    padding: 20px 35px;
    color: #353535;
    z-index: 10;
    transition: all .2s ease-in-out;
	width:250px;
}
.plain-card-4:hover .clip-plain-card-container-4 {
	clip-path: circle(80%);
} 
.plain-card-4:hover .clip-plain-card-container-2-4 {
	clip-path: circle(65% at 90% 80%);
}
.plain-card-4:hover .outer-clip-details-4 {
	color: #fff;
}


					<div class="plain-card-4">
  <div class="outer-clip-details-4">
    Some text in this area here
  </div>
  <div class="clip-plain-card-container-4"></div>
  <div class="clip-plain-card-container-2-4"></div>
</div>

Text Card Fill

Hover over me for a cool effect!

I have some extra details hidden in here. ;)

View CSS

View HTML


				.plain-card-3 {
    position: relative;
    border-radius: 10px;
    background: #efefef;
}
.clip-card-container-3 {
    position: relative;
    clip-path: circle(0px at 0px 0px);
    transition: all 1s ease;
    width: 210px;
    padding: 40px 30px 40px;
    border-radius: 5px;
    background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
    background-size: cover;
}
.plain-card-3:hover .clip-card-container-3 {
	clip-path: circle(100%);
}
.card-details-3 {
    padding: 25px 0;
    font-weight: bold;
    font-size: 25px;
    color: #fff;
}
.outer-clip-details {
    font-weight: bold;
    font-size: 35px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    padding: 15px 25px;
    color: #353535;
    background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
    background-size: cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}


					<div class="plain-card-3">
  <div class="outer-clip-details">
    Hover over me for a cool effect!
  </div>
  <div class="clip-card-container-3">
    <div class="card-details-3">
      I have some extra details hidden in here. ;)
    </div>
  </div>
</div>

Hidden Card Fill

I have some details here.

View CSS

View HTML


				.plain-card {
    position: relative;
    border-radius: 10px;
    background: #f2f2f2;
}
.clip-plain-card-container {
    position: relative;
    clip-path: circle(35px at 10px 10px);
    transition: all 1s ease;
    padding: 40px;
    border-radius: 5px;
    background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
    background-size: cover;
}
.plain-card:hover .clip-plain-card-container {
	clip-path: circle(100%);
}
.card-plain-details {
    padding: 30px 10px;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
}


					<div class="plain-card">
  <div class="clip-plain-card-container">
    <div class="card-plain-details">
      I have some details here.
    </div>
  </div>
</div>

Flip Card

Image Title

Space Rock

Outer Space Rock

View CSS

View HTML


				.card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  cursor: pointer;
}
.card img {
    width: 300px;
    height: 300px;
}
.card-container {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.card:hover .card-container {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card-front {
  background-color: #bbb;
  color: black;
}
.card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}


					<div class="card">
  <div class="card-container">
    <div class="card-front">
      <img src="img.png" >
    </div>
    <div class="card-back">
      <h4>Image Title</h4> 
      <p>Space Rock</p> 
      <p>Outer Space Rock</p>
    </div>
  </div>
</div>

Expand Card

Expand

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

View CSS

View HTML


				.content {
    padding: 10px;
}
.title {
    cursor: pointer;
    padding: 10px 25px;
    border-radius: 5px;
    transition: border-radius ease-in-out 1s, background-color ease .5s;
}
.title:hover {
    border-radius: 0;
}
.box-2 {
    background: rgb(241, 241, 241);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.288);
    border-radius: 5px;
    color: #353535;
    margin: 20px;
	width: 200px;
}
@media (min-width:1024px) {
/* expand */
    .box-2 {
        box-shadow: none;
        border-radius: 0;
        background: #353535;
        color: #fff;
        width: 250px;
        height: 40px;
        overflow: hidden;
        max-height: 250px;
        transition: box-shadow ease-in 1s ,background-color ease-in .5s, width ease-out 1s, border-radius ease-in-out 1s, height ease 1s;
    }
    .box-2:hover {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.288);
        background: rgb(241, 241, 241);
        width: 600px;
        height: 100%;
        border-radius: 5px;
    }
    .box-2 > .content {
        height: 0;
        transition: height ease-in-out 1s, opacity ease-in-out .5s;
        opacity: 0;
        color: #353535;
        background: rgb(241, 241, 241);
    }
    .box-2:hover > .content {
        height: 250px;
        opacity: 1;
    }
    .box-2:hover > .title {
        color: #353535;
    }
    /* expand end */
}


					<div class="box-2">
        <div class="title">Expand</div>
        <div class="content">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat.</p>
  </div>
</div>

Dropdown card

Dropdown

View CSS

View HTML


				.content {
    padding: 10px;
}
.title {
    cursor: pointer;
    padding: 10px 25px;
    border-radius: 5px;
    transition: border-radius ease-in-out 1s, background-color ease .5s;
}
.title:hover {
    border-radius: 0;
}
.box {
    background: rgb(241, 241, 241);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.288);
    border-radius: 5px;
    color: #353535;
    margin: 20px;
	width:300px;
}
@media (min-width:1024px) {
    /* dropdown */
    .box {
        box-shadow: none;
        border-radius: 0;
        background: #353535;
        color: #fff;
        height: 40px;
        width: 250px;
        overflow: hidden;
        max-height: 350px;
        transition: box-shadow ease-in 1s ,background-color ease-in .5s, border-radius ease-in-out 1s, height ease 1s;
    }
    .box:hover {
        background: rgb(241, 241, 241);
        border-radius: 5px;
        height: 250px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.288);
    }
    .box > .content {
        height: 0;
        transition: height ease-in-out 1s, opacity ease-in 1s;
        opacity: 0;
        color: #353535;
    }
    .box:hover>.content {
        height: fit-content;
        opacity: 1;
    }
    .box:hover>.title {
        color: #353535;
    }
    /* dropdown end */
}


					<div class="box">
        <div class="title">Dropdown</div>
        <div class="content">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat.</p>
        </div>
 </div>

Icons

Menu Icon

View CSS

View HTML


				/* Resource - https://codepen.io/banik/pen/BVrNXP */
#menu-icon-x {
	margin: 1em;
	width: 40px;
	cursor: pointer;
}
#menu-icon-x:after, 
#menu-icon-x:before, 
#menu-icon-x div {
    background-color: #000;
    border-radius: 3px;
    content: '';
    display: block;
    height: 5px;
    margin: 7px 0;
    transition: all .2s ease-in-out;
}
.click:before {
	transform: translateY(12px) rotate(135deg);
}
.click:after {
	transform: translateY(-12px) rotate(-135deg);
}
.click div {
	transform: scale(0);
}


					<div id="menu-icon-x">
        <div></div>
      </div>
<script>
    document.getElementById("menu-icon-x").onclick = function() {myFunction()};
    function myFunction() {
        var el = document.getElementById("menu-icon-x");
        
        if(el.classList.contains("click")){
            el.classList.remove("click");
        } else {
            el.classList.add("click");
        }
    }
</script>

Images

Clipped Image

Some Text

View CSS

View HTML


				.clip-img-container {
    position: relative;
    clip-path: circle(50px);
    transition: all 1s ease;
    padding: 40px;
    border-radius: 5px;
    background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
    background-position: bottom;
    background-size: cover;
}
.clip-img-container:hover {
	clip-path: circle(100%);
}
.clip-img-text {
  	padding: 20px;
  	border-radius: 5px;
  	color: #fff;
  	font-weight: bold;
}


					<div class="clip-img-container">
  <div class="clip-img-text">
    Some Text
  </div>
</div>

Text & Background Image

TEXT

View CSS

View HTML


				.bg-text {
    font-size: 90px;
    /* Fall Back - Add JS to detect unsupported broswers and to not add the background img css class */
    color: #353535;
    /* Background Image */
    background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: cover;
	background-position: bottom;
}


					<h2 class="bg-text">TEXT</h2>

Perspective Image

View CSS

View HTML


				.p-container {
	height: fit-content;
	perspective: 500px;
	width:300px;
}
.right-side {
    transform-style: preserve-3d;
    transform: rotateY(20deg);
	transition: all ease 1s;
}
.right-side:hover {
	transform: rotateY(0deg);
}


					<div class="p-container">
  <div class="right-side">
    <img src="img.png">
  </div>
</div>

Input Fields

Floating Label Input

View CSS

View HTML


				/* https://codepen.io/team/css-tricks/pen/XVBLRM */
.floating-field {
    display: flex;
    flex-flow: column-reverse;
    margin-bottom: 16px;
	width: 250px;
}
.floating-input, .floating-label {
    transition: all 0.2s;
    touch-action: manipulation;
}
.floating-input, .floating-field input.floating-input {
    font-size: 20px;
    border: 0;
    border-bottom: 1px solid #ccc;
    font-family: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0;
    cursor: text;
    background: transparent;
}
.floating-input:focus {
    outline: 0;
    border-bottom: 1px solid #666;
}
.floating-label {
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: -1;
}
.floating-input:placeholder-shown + .floating-label {
    cursor: text;
    max-width: 66.66%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left bottom;
    transform: translate(0, 2em) scale(1.5);
}
//CHROME
input.floating-input::-webkit-input-placeholder {
    opacity: 0;
    transition: inherit;
}
input.floating-input:focus::-webkit-input-placeholder {
	opacity: 1;
}
//MOZILLA SUPPORT
.floating-input::-moz-placeholder {
    opacity: 0;
    transition: inherit;
}
input.floating-input:focus::-moz-placeholder {
	opacity: 1;
}
.floating-input::placeholder {
    opacity: 0;
    transition: inherit;
}
floating-input:focus::placeholder {
	opacity: 1;
}
input.floating-input:focus + .floating-label {
    transform: translate(0, 0) scale(1);
    cursor: pointer;
}


					<div class="floating-field">
    <input type="text" class="floating-input" name="email" placeholder="someone@email.com">
    <label for="email" class="floating-label">Email</label>
</div>

Layout

Tool Tips

Tool Tip Bottom

View CSS

View HTML


				/* resource - https://www.w3schools.com/howto/howto_css_tooltip.asp */
.tooltip {
  position: relative;
  display: inline-block;
  cursor:pointer;
}
.tooltip span {
	padding: 3px 15px 3px 10px;
  border: 1px solid #353535;
  border-radius: 20px;
}
.tooltip .tooltip-bottom {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 135%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .tooltip-bottom::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}
.tooltip:hover .tooltip-bottom {
  visibility: visible;
  opacity: 1;
}
.tooltip .fa-question-circle {
	margin-right: 10px;
}


					<div class="tooltip"><span><i class="fas fa-question-circle"></i>Text</span>
  <span class="tooltip-bottom">Tooltip!</span>
</div>

Tool Tip Top

View CSS

View HTML


				/* resource - https://www.w3schools.com/howto/howto_css_tooltip.asp */
.tooltip {
  position: relative;
  display: inline-block;
  cursor:pointer;
}
.tooltip span {
  padding: 3px 15px 3px 10px;
  border: 1px solid #353535;
  border-radius: 20px;
}
.tooltip .tooltip-top {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .tooltip-top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltip-top {
  visibility: visible;
  opacity: 1;
}
.tooltip .fa-question-circle {
	margin-right: 10px;
}


					<div class="tooltip"><span><i class="fas fa-question-circle"></i>Text</span>
  <span class="tooltip-top">Tooltip!</span>
</div>