Button hover effects with box-shadow

Developer
Giana
Size
4,557 Kb
Views
42,504
  1. Button hover effects with box-shadow Previews
  2. Button hover effects with box-shadow HTML Codes
  3. Button hover effects with box-shadow CSS Codes

How do I make an button hover effects with box-shadow?

Making some basic animations with box-shadows. No extra elements or even pseudo elements required.Check out my button collection for more.. What is a button hover effects with box-shadow? How do you make a button hover effects with box-shadow? This script and codes were developed by Giana on 20 September 2022, Tuesday.

Button hover effects with box-shadow Previews
IQ Test

Button hover effects with box-shadow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button hover effects with box-shadow</title> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="buttons"> <h1>Simple hover effects with <code>box-shadow</code></h1> <button class="fill">Fill In</button> <button class="pulse">Pulse</button> <button class="close">Close</button> <button class="raise">Raise</button> <button class="up">Fill Up</button> <button class="slide">Slide</button> <button class="offset">Offset</button>
</div>
</body>
</html>

Button hover effects with box-shadow - Script Codes CSS Codes

/* https://developer.mozilla.org/en/docs/Web/CSS/box-shadow box-shadow: [inset?] [top] [left] [blur] [size] [color]; Tips: - We're setting all the blurs to 0 since we want a solid fill. - Add the inset keyword so the box-shadow is on the inside of the element - Animating the inset shadow on hover looks like the element is filling in from whatever side you specify ([top] and [left] accept negative values to become [bottom] and [right]) - Multiple shadows can be stacked - If you're animating multiple shadows, be sure to keep the same number of shadows so the animation is smooth. Otherwise, you'll get something choppy.
*/
.fill:hover,
.fill:focus { box-shadow: inset 0 0 0 2em var(--hover);
}
.pulse:hover,
.pulse:focus { -webkit-animation: pulse 1s; animation: pulse 1s; box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}
@-webkit-keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--hover); }
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--hover); }
}
.close:hover,
.close:focus { box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}
.raise:hover,
.raise:focus { box-shadow: 0 0.5em 0.5em -0.4em var(--hover); -webkit-transform: translateY(-0.25em); transform: translateY(-0.25em);
}
.up:hover,
.up:focus { box-shadow: inset 0 -3.25em 0 0 var(--hover);
}
.slide:hover,
.slide:focus { box-shadow: inset 6.5em 0 0 0 var(--hover);
}
.offset { box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
}
.offset:hover, .offset:focus { box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
}
.fill { --color: #a972cb; --hover: #cb72aa;
}
.pulse { --color: #ef6eae; --hover: #ef8f6e;
}
.close { --color: #ff7f82; --hover: #ffdc7f;
}
.raise { --color: #ffa260; --hover: #e5ff60;
}
.up { --color: #e4cb58; --hover: #94e458;
}
.slide { --color: #8fc866; --hover: #66c887;
}
.offset { --color: #19bc8b; --hover: #1973bc;
}
button { color: var(--color); -webkit-transition: 0.25s; transition: 0.25s;
}
button:hover, button:focus { border-color: var(--hover); color: #fff;
}
body { color: #fff; background: #17181c; font: 300 1em 'Fira Sans', sans-serif; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex;
}
button { background: none; border: 2px solid; font: inherit; line-height: 1; margin: 0.5em; padding: 1em 2em;
}
h1 { font-weight: 400;
}
code { color: #e4cb58; font: inherit;
}
/* As a bonus, I will now begin including a shoddily written limerick or other high literary masterpiece in all my pens. Misspelled visual rhymes and two left feet are the spice of life. You're welcome. [1/?] Glass cannon There was a young dev on the frontend delighted to see folks affronted They claimed satisfaction provoking a reaction but threw quite a fit when confronted
*/
Button hover effects with box-shadow - Script Codes
Button hover effects with box-shadow - Script Codes
Home Page Home
Developer Giana
Username giana
Uploaded September 20, 2022
Rating 4.5
Size 4,557 Kb
Views 42,504
Do you need developer help for Button hover effects with box-shadow?

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!

Giana (giana) Script Codes
Name
Animated rainbow lines
Neon bubbles
Buttons with animated background
CSS box shadow particles v3
Sass border drawing mixin
Random Color Palette Generator
Stars
CSS box shadow animation
Halloween CSS Bleeding Header
Random animated pattern
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!