Buttons

Button Bars

Copy to clipboard
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

Copy to clipboard
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

Copy to clipboard
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

Copy to clipboard
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

Copy to clipboard
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

Copy to clipboard
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

Copy to clipboard
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

Copy to clipboard
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

Copy to clipboard

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

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.

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

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

Copy to clipboard
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

Copy to clipboard
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

Copy to clipboard

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

Copy to clipboard
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

Copy to clipboard
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>				

Tool Tips

Tool Tip Bottom

Copy to clipboard
Text Tooltip!
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

Copy to clipboard
Text Tooltip!
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>