I am currently experimenting on a button for my website. I want it to look like an average button but, once you hover it, it becomes a bone (my website is about dogs).
S
A different idea of animation with less of code:
:root {
--bg: #1a1e24;
--color: #eee;
--font: Montserrat, Roboto, Helvetica, Arial, sans-serif;
}
.bone {
display: inline-block;
text-align: center;
background: var(--color);
color: var(--bg);
font-weight: bold;
padding: 1em 1em 1.03em;
line-height: 1;
border-radius: 0.4em;
position: relative;
min-width: 8.23em;
text-decoration: none;
font-family: var(--font);
font-size: 1.25rem;
filter: url('#goo');
}
.bone:before {
content: "";
position: absolute;
top:-1em;
bottom:-1em;
left:0;
right:0;
background:
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top left,
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top right,
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom left,
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom right;
background-size: 0 0;
background-repeat:no-repeat;
transition:0.8s ease-out;
}
.bone:hover::before {
background-size: 50px 50px;
left:-1em;
right:-1em;
}
/* Demo styles */
body {
min-height: 100vh;
margin:0;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg)
}
Woof woof
You can adjust different values to control the final shape using CSS variables:
.bone {
--ty:-1em;
--tx:-1em;
--s:50px;
display: inline-block;
text-align: center;
background: var(--color);
color: var(--bg);
font-weight: bold;
padding: 1em 1em 1.03em;
margin:2em;
line-height: 1;
border-radius: 0.4em;
position: relative;
min-width: 8.23em;
text-decoration: none;
font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
font-size: 1.25rem;
filter: url('#goo');
}
.bone:before {
content: "";
position: absolute;
top:var(--ty);
bottom:var(--ty);
left:0;
right:0;
background:
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top left,
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top right,
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom left,
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom right;
background-size: 0 0;
background-repeat:no-repeat;
transition:0.7s;
}
.bone:hover::before {
background-size: var(--s) var(--s);
left:var(--tx);
right:var(--tx);
}
body {
background:var(--bg);
--bg:#1a1e24;
--color:#eee;
}
Woof woof
Woof woof
Woof
Woof
Still another kind of animation:
.bone {
--ty:-1em;
--tx:-1em;
--s:50px;
display: inline-block;
text-align: center;
background: var(--color);
color: var(--bg);
font-weight: bold;
padding: 1em 1em 1.03em;
margin:2em;
line-height: 1;
border-radius: 0.4em;
position: relative;
z-index:0;
min-width: 8.23em;
text-decoration: none;
font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif;
font-size: 1.25rem;
filter: url('#goo');
}
.bone:before {
content: "";
position: absolute;
z-index:-1;
top:50%;
bottom:50%;
left:0;
right:0;
background:
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top left,
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top right,
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom left,
radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom right;
background-size: var(--s) var(--s);
background-repeat:no-repeat;
transition:0.6s;
}
.bone:hover::before {
top:var(--ty);
bottom:var(--ty);
left:var(--tx);
right:var(--tx);
}
body {
background:var(--bg);
--bg:#1a1e24;
--color:#eee;
}
Woof woof
Woof woof
Woof
Woof