CSS snipets

content goes here

Simple clover

:root{
  --leaf-colour:#75976a;
  --leaf-width:50px;
  --leaf-copy:-50px; /*the SAME as above but negative aka to FLIP*/
}

.clover-container{
  display:flex;
  align-items:center;
  align-content:center;
  justify-content:center;
  width: calc(var(--leaf-width)*4);
  height:calc(var(--leaf-width)*4);
  margin:-25px; /*naturally have a lot of gap so adjust to liking*/
}

.clover {
  position:absolute;
  display:grid; /*grid is used to align leaves*/
  grid-template-columns:repeat(2, calc(var(--leaf-width)*2));
  grid-template-rows:repeat(2, calc(var(--leaf-width)*2));
  width: calc(var(--leaf-width)*4);
  height:calc(var(--leaf-width)*4);
}

.clover-container>.content {
  z-index:5;
  width: calc(var(--leaf-width) + 20%);
  height:calc(var(--leaf-width) + 20%);
  background-color:var(--leaf-colour);
  padding:2%;
  justify-self:center;
  align-content:center;
  text-align:center;
  color:black;
  overflow-y:auto;overflow-x:hidden;
}

.leaf-one, .leaf-two, .leaf-three, .leaf-four{
  position:relative;
  width:var(--leaf-width);
  height:var(--leaf-width);
  background-color:var(--leaf-colour);
  border-radius: 60% / 60% 0% 60% 60%;
}

.leaf-one::before, .leaf-two:before, .leaf-three:before, .leaf-four:before {
  content:"";
  position:absolute;
  width:var(--leaf-width);
  height:var(--leaf-width);
  background-color:var(--leaf-colour);
  border-radius: 60% / 60% 0% 60% 60%;
  top:var(--leaf-copy);left:0px;
  rotate:90deg;
}

.leaf-one {
  rotate:90deg;
  justify-self:start;
  align-self:start;
  left:50%;
  top:25%;
}

.leaf-two {
  rotate:180deg;
  justify-self:end;
  align-self:start;
  top:50%;
  left:-25%;
}

.leaf-three {
  rotate:0deg;
  justify-self:start;
  align-self:end;
  top:-50%;
  left:25%;
}

.leaf-four {
  rotate:-90deg;
  justify-self:end;
  align-self:end;
  top:-25%;
  left:-50%;
}

Flower with stem

:root{
  --leaf-colour:#75976a;
  --flower-colour:#cc5b76;
  --leaf-width:50px;
  --leaf-copy:-50px; /*the SAME as above but negative aka to FLIP*/
}

.flower-n-stem {
  display:grid;
  align-items:center;
  width: calc(var(--leaf-width)*2);
  height:calc(var(--leaf-width)*3);
}

.flower-leaf {
  position:relative;
  width:var(--leaf-width);
  height:var(--leaf-width);
  rotate:90deg;
  background-color:var(--leaf-colour);
  border-radius: 90% 0% 70% 10%;
}

.flower-leaf::before {
  content:"";
  position:absolute;
  width:var(--leaf-width);
  height:var(--leaf-width);
  background-color:var(--leaf-colour);
  border-radius: 70% 0% 90% 10%;
  top:var(--leaf-copy);left:0px;
  rotate:90deg;
}

.flower-leaf::after {
  content:"";
  position:absolute;
  width:calc(var(--leaf-width)*2);
  height:calc(var(--leaf-width)/5) ;
  background-color:var(--leaf-colour);
  top:-4px;left:var(--leaf-copy);
}

.flower-petals {
  z-index:1;
  border-radius:100%;
  position:relative;
  left:25%;
  height:var(--leaf-width);
  width:var(--leaf-width);
  rotate:-17deg;
  background-color:var(--flower-colour); /*this is the centre colour, change if you want*/
  box-shadow:
  20px 0px var(--flower-colour),
  6px 19px var(--flower-colour),
  -16px 12px var(--flower-colour),
  -16px -12px var(--flower-colour),
  6px -19px var(--flower-colour);
}

/*OPTIONAL: make the petals spin*/
/*DELETE if not needed, there's 2 options*/

.flower-n-stem:hover .flower-petals{
  animation:spin 10s infinite linear;
/*this makes the petals spin ON HOVER*/
}

.flower-petals{
  animation:spin 10s infinite linear;
/*this makes the petals spin NO MATTER WHAT*/
}

@keyframes spin {
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg)}
}

Ladybug

:root{
  --lady-height:30px;
  --lady-width:90px;
  --lady-radius:40px;
  --lady-bodco:black;
  --lady-wigco:red;
}
.ladybug {
  display:grid;
  grid-template-rows:repeat(2, 1fr);
	grid-template-columns:1fr;
	position:relative;
  margin-bottom:50px;
  margin-top:20px;
}

.lady-head {
	background:var(--lady-bodco);
	height:var(--lady-height);
	width:calc(var(--lady-width)/1.88);
	border-radius:var(--lady-radius);
  justify-self:center;
	align-self:end;
  display:flex;
  justify-content:space-evenly;
}

.lady-head>.antenna{
	background:var(--lady-bodco);
	height:var(--lady-height);
	width:calc(var(--lady-height)/3);
	position:relative;
	border-radius:var(--lady-radius);
  bottom:13px;
}

.lady-body {
	background:var(--lady-bodco);
	height:calc(var(--lady-height)*2.5);
	width:var(--lady-width);
  justify-self:center;
	align-self:start;
	position:absolute;
	top:calc(var(--lady-height) - 15%);
	border-radius:var(--lady-radius);
}

.lady-legs{
	background:var(--lady-bodco);
	height:calc(var(--lady-height)/2.88);
	width:calc(var(--lady-width)*1.15);
	border-radius:var(--lady-radius);
  position:relative;
  justify-self:center;
  top:10px;
  box-shadow:
  0px 20px var(--lady-bodco),
  0px 40px var(--lady-bodco);
  display:grid;
  grid-template-rows:1fr;
	grid-template-columns:repeat(2, 1fr);
}

.lady-wing-left {
	background:var(--lady-wigco);
	height:calc(var(--lady-height)*2.36);
	width:calc(var(--lady-width)/1.9);
	z-index:1;
	position:relative;
  border-radius:130% 10% 20% 100%;
	top:-6px;
  justify-self:end;
	align-self:center;
}

.lady-wing-left::before { /*this is the ladybug's dots*/
  content:'';
  z-index:5;
  background-color:var(--lady-bodco);
  width:calc(var(--lady-width)/4);
  height:calc(var(--lady-width)/4);
  border-radius:100%;
  left:3px;
  top:20px;
  position:absolute;
  box-shadow:
  17px 27px var(--lady-bodco),
  33px -25px var(--lady-bodco);
}

.lady-wing-right {
	background:var(--lady-wigco);
	height:calc(var(--lady-height)*2.36);
	width:calc(var(--lady-width)/1.9);
	z-index:1;
	position:relative;
  border-radius:130% 10% 20% 100%;
  top:-6px;
  justify-self:start;
	align-self:center;
  transform:rotateY(180deg);
}

.lady-wing-right::before { /*this is the ladybug's dots*/
  content:'';
  z-index:5;
  background-color:var(--lady-bodco);
  width:calc(var(--lady-width)/4);
  height:calc(var(--lady-width)/4);
  border-radius:100%;
  left:3px;
  top:20px;
  position:absolute;
  box-shadow:
  17px 27px var(--lady-bodco),
  33px -23px var(--lady-bodco);
}

/*OPTIONAL: ladybug wing move when hover*/
.ladybug:hover .lady-wing-left {
  animation:left-wing 1s infinite alternate ease-in-out;
}

.ladybug:hover .lady-wing-right {
  animation:right-wing 1s infinite alternate ease-in-out;
}

@keyframes left-wing {
  0% {rotate:0deg;top:-6px;}
  100% {rotate:10deg;top:-6px;left:-1.5px;}
}
@keyframes right-wing {
  0% {rotate:0deg;top:-6px;}
  100% {rotate:-10deg;top:-6px;right:-1.5px;}
}

Button hover

It was a pain in the ass trying to make everything work with :root. In hindsight I think I can just put width:100% instead of relying to token or define it. This CSS bear need basic CSS knowledge because the tokens arent accurate. I plan on adding a tail and feet in the future but for now enjoy this cutie!

Flexbox bear

:root{
    --border-px:3px;
    --bear-width:145px;
    --bear-height:50px;
    --bear-fur:beige;
    --bear-face:black;
    --border: color-mix(in srgb, var(--bear-face) 20%, var(--bear-fur));
}

.bear{
  display:block;
  width:calc(var(--bear-width) - 0.5px + (var(--border-px)*2));
}

.bear-face{
  background-color:var(--bear-fur);
  width:var(--bear-width);
  height:var(--bear-height);
  border-radius:0 0 10px 10px;
  border-left:var(--border-px) solid var(--border);
  border-right:var(--border-px) solid var(--border);
  border-bottom:var(--border-px) solid var(--border);
  color:var(--bear-face);
  display:flex;
  align-items:flex-end;
  justify-content:space-evenly;
  text-align:center;
}

.b-nose{
  background-color:var(--border);
  width:calc(var(--bear-width)/5);
  height:calc(var(--bear-height)/3);
  border-radius:100px 100px 0 0;
  box-shadow:
  5px 1px 5px var(--border),
  -5px 1px 5px var(--border),
  1px -5px 5px var(--border);
  align-content:end;
  line-height:10px; /*change to move nose placement*/
  &::after{
    content:'ᴥ';
  }
}

.bear-ear{
  display:flex;
  justify-content:space-around;
  width:calc(var(--bear-width) + (var(--border-px)*2));
}

.b-ear{
  background-color:var(--bear-fur);
  width:calc(var(--bear-width)/5);
  height:calc(var(--bear-height)/3);
  border-radius:100px 100px 0 0;
  position:relative;
  top:6px; /* this may need altering based on height change */
  border-left:var(--border-px) solid var(--border);
  border-right:var(--border-px) solid var(--border);
  border-top:var(--border-px) solid var(--border);
}

.b-content{
  background-color:var(--bear-fur);
  color:var(--bear-face);
  padding:5%;
  position:relative;
  top:calc((var(--bear-width)/10) + 2px + var(--border-px));
  height:calc(var(--bear-height)*2); /* change this based on preferred content shown */
  width:var();
  border-radius:10px 10px 0 0;
  border-left:var(--border-px) solid var(--border);
  border-right:var(--border-px) solid var(--border);
  border-top:var(--border-px) solid var(--border);
  overflow:auto;
}

.b-eye{
  background-color:var(--bear-face);
  width:10px;
  height:3px;
  border-radius:10px;
  align-self:center;
  animation:close-eye 1s;
}

.bear:hover .b-eye{
  background-color:var(--bear-face);
  width:10px;
  height:10px;
  animation:open-eye 1s;
}

@keyframes close-eye {
  from {width:10px;height:10px;}
  to {width:10px;height:3px;}
}
@keyframes open-eye {
  0%   {width:10px;height:3px;}
  100% {width:10px;height:10px;}
}