Mana Button
How do I make an mana button?
What is a mana button? How do you make a mana button? This script and codes were developed by Dean Hidri on 01 October 2022, Saturday.
Mana Button Previews
Mana Button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mana Button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Ubuntu:400,700'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/electerious/basicGrid/d77c5024/dist/basicGrid.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row middle-on-small center-on-small"> <div class="column small-12 medium-6 large-4"> <a href="#!" class="c-button c-button--gooey"> Need mana <div class="c-button__blobs"> <div></div> <div></div> <div></div> </div> </a> <p class="pen-info">Hover over the button</p> </div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block; height: 0; width: 0;"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"></feColorMatrix> <feBlend in="SourceGraphic" in2="goo"></feBlend> </filter> </defs>
</svg>
</body>
</html>
Mana Button - Script Codes CSS Codes
:root { font-size: 16px; font-family: 'Ubuntu', sans-serif;
}
html,
body,
.row { height: 100%; text-align: center;
}
.pen-info { color: #d4d3d4; font-size: 80%; text-transform: uppercase;
}
.c-button { color: #000; font-weight: 700; font-size: 1em; text-decoration: none; padding: .7em 1.8em; cursor: pointer; display: inline-block; vertical-align: middle;
}
.c-button--gooey { color: #06c8d9; font-size: 1.3em; text-transform: uppercase; letter-spacing: 2px; border: 4px solid #06c8d9; border-radius: 0; padding: 1.2em 3.4em; position: relative; -webkit-transition: all 700ms ease; transition: all 700ms ease;
}
.c-button--gooey .c-button__blobs { height: 100%; -webkit-filter: url(#goo); filter: url(#goo); overflow: hidden; position: absolute; top: 0; left: 0; bottom: -3px; right: -1px; z-index: -1;
}
.c-button--gooey .c-button__blobs div { background-color: #06c8d9; width: 34%; height: 100%; border-radius: 100%; position: absolute; -webkit-transform: scale(1.4) translateY(125%) translateZ(0); transform: scale(1.4) translateY(125%) translateZ(0); -webkit-transition: all 700ms ease; transition: all 700ms ease;
}
.c-button--gooey .c-button__blobs div:nth-child(1) { left: -5%;
}
.c-button--gooey .c-button__blobs div:nth-child(2) { left: 30%; -webkit-transition-delay: 60ms; transition-delay: 60ms;
}
.c-button--gooey .c-button__blobs div:nth-child(3) { left: 66%; -webkit-transition-delay: 25ms; transition-delay: 25ms;
}
.c-button--gooey:hover { color: #fff;
}
.c-button--gooey:hover .c-button__blobs div { -webkit-transform: scale(1.4) translateY(0) translateZ(0); transform: scale(1.4) translateY(0) translateZ(0);
}
Developer | Dean Hidri |
Username | visualcookie |
Uploaded | October 01, 2022 |
Rating | 4.5 |
Size | 3,074 Kb |
Views | 16,192 |
Do you need developer help for Mana Button?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Similar Scripts & Codes
Name | Username | Size |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Beautiful canvas stars | Matths | 2,399 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!