Buttons

Bubble Button

Copy to clipboard
View CSS
View Markup

				.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 in Social button

Copy to clipboard
View CSS
View Markup

				.s-box {
    width: 30px;
    height: 25px;
    padding: 5px;
    position: relative;
    cursor: pointer;
    transition: 300ms ease;
	background:#0e4d92;
	padding:20px
}
.socials a .fa {
    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;
}
.s-box:hover {
    width: 100px;
}
.s-box:hover:hover .icon {
    opacity: 0;
    top: 30%;
}
.s-box:hover:hover .name {
    opacity: 1;
    top: 50%;
}				

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

Cards

Text Card Fill

Copy to clipboard
Hover over me for a cool effect!
I have some extra details hidden in here. ;)
View CSS
View Markup

				.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

Copy to clipboard
I have some details here.
View CSS
View Markup

				.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

Copy to clipboard

Image Title

Space Rock

Outer Space Rock

View CSS
View Markup

				.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

Copy to clipboard
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View CSS
View Markup

				.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:300px;
}

@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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.</p>
  </div>
</div>				

Dropdown card

Copy to clipboard
Dropdown

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 Markup

				.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

Copy to clipboard
View CSS
View Markup

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

					<!-- #resource - https://codepen.io/banik/pen/BVrNXP -->
<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

Copy to clipboard
Some Text
View CSS
View Markup

				.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

Copy to clipboard

TEXT

View CSS
View Markup

				.bg-text {
    font-size: 90px;
    /* Fall Back */
    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;

    /* Paralax */
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}				

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

Perspective Image

Copy to clipboard
View CSS
View Markup

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

Tool Tips

Tool Tip Bottom

Copy to clipboard
Text Tooltip!
View CSS
View Markup

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

Copy to clipboard
Text Tooltip!
View CSS
View Markup

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