- Unleashed Design
CSS Buttons (gOOEY BUbbLES)
CodePen Home
Html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="gooey">
<!-- in="sourceGraphic" -->
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="highContrastGraphic" />
<feComposite in="SourceGraphic" in2="highContrastGraphic"
operator="atop" />
</filter>
</defs>
</svg>
<button id="gooey-button">
F*** Awesome
<span class="bubbles">
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
</span>
</button>
Now CSS (sass)
$prime: #00FF80
$second: #0c1016
body,
html
align-items: center
background-color: $second
display: flex
font-family: 'Roboto'
font-size: 10px
height: 100%
justify-content: center
margin: 0
padding: 0
width: 100%
*
box-sizing: border-box
svg
position: absolute
top: -4000px
left: -4000px
#gooey-button
padding: 1rem
font-size: 2rem
border: none
color: $second
filter: url('#gooey')
position: relative
background-color: $prime
&:focus
outline: none
.bubbles
position: absolute
top: 0
left: 0
bottom: 0
right: 0
.bubble
background-color: $prime
border-radius: 100%
position: absolute
top: 0
left: 0
display: block
z-index: -1
@for $bubble from 1 through 10
&:nth-child(#{$bubble})
$size: 25px
left: (random(90) + 10)+px
width: $size
height: $size
animation: move-#{$bubble} #{3 + $bubble*0.02}s infinite
animation-delay: #{$bubble*0.2}s
@for $bubble from 1 through 10
@keyframes move-#{$bubble}
0%
transform: translate(0, 0)
99%
transform: translate(0, -(random(80) + 50)+px)
100%
transform: translate(0, 0)
opacity: 0Button Hover - Pattern Background Animation
Html
<div class="wrapper">
<div class="icon facebook">
<div class="tooltip">Facebook</div>
<span><i class="fab fa-facebook-f"></i></span>
</div>
<div class="icon twitter">
<div class="tooltip">Twitter</div>
<span><i class="fab fa-twitter"></i></span>
</div>
<div class="icon instagram">
<div class="tooltip">Instagram</div>
<span><i class="fab fa-instagram"></i></span>
</div>
<div class="icon github">
<div class="tooltip">Github</div>
<span><i class="fab fa-github"></i></span>
</div>
<div class="icon youtube">
<div class="tooltip">Youtube</div>
<span><i class="fab fa-youtube"></i></span>
</div>
</div>
Now CSS (sass)
/*
Auther: Abdelrhman Said
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus,
*:active {
outline: none !important;
-webkit-tap-highlight-color: transparent;
}
html,
body {
display: grid;
height: 100%;
width: 100%;
font-family: "Poppins", sans-serif;
place-items: center;
background: linear-gradient(315deg, #ffffff, #d7e1ec);
}
.wrapper {
display: inline-flex;
}
.wrapper .icon {
position: relative;
background-color: #ffffff;
border-radius: 50%;
padding: 15px;
margin: 10px;
width: 50px;
height: 50px;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip {
position: absolute;
top: 0;
font-size: 14px;
background-color: #ffffff;
color: #ffffff;
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background-color: #ffffff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip {
top: -45px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
background-color: #3b5999;
color: #ffffff;
}
.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
background-color: #46c1f6;
color: #ffffff;
}
.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
background-color: #e1306c;
color: #ffffff;
}
.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
background-color: #333333;
color: #ffffff;
}
.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
background-color: #de463b;
color: #ffffff;
}
Important notice
You can hire me on Fiverr, I knew graphic designing, video edition, web designing, YouTube seo, all thing for YouTube.
So this was the end of this post meet you all in the next post before that don't forget to subscribe our Blog, so that you will get notified when ever we upload a awesome post. Thanks for reading bye. You can also follow me on Telegram and Youtube I post it pretty much every week, thank you so much and I will see you all in the next post bye.