Web Goodies

Welcome to Micky's collection of free resources to help with web development and design No need to credit me, but it is appreciated a lot!!

Site Templates

Here I will add full website templates that I make

Fonts

Text Effects

Basic Shadow

<h1 style="color:white; text-shadow:2px 2px 4px #000000;">White Shadow</h1>

Pink Shadow

Color Animation

<html><div class="coloranimation"> <h1>Color Animation</h1></div></html><style>.coloranimation { text-transform: uppercase; background-image: linear-gradient( -225deg, #ffd6e9 0%, #ffbcda 29%, #e1b09c 67%, #c79274 100% ); background-size: auto auto; background-clip: border-box; background-size: 200% auto; color: #fff; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: textclip 2s linear infinite; display: inline-block; } @keyframes textclip { to { background-position: 200% center; } }</style>

Buttons

Here i will add codes for buttons with various effects

<html> <button class="button-71" role="button">Pink Shiny Button</button> <style> /* CSS */ .button-71 { background-color: #f299c1; border: 0; border-radius: 56px; color: #fff; cursor: pointer; display: inline-block; font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif; font-size: 18px; font-weight: 600; outline: 0; padding: 16px 21px; position: relative; text-align: center; text-decoration: none; transition: all .3s; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-71:before { background-color: initial; background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%); border-radius: 125px; content: ""; height: 50%; left: 4%; opacity: .5; position: absolute; top: 0; transition: all .3s; width: 92%; } .button-71:hover { box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px; transform: scale(1.05); } @media (min-width: 768px) { .button-71 { padding: 16px 48px; } } </style> </html>

<html> <button class="button-71" role="button">Purple Shiny Button</button> <style> /* CSS */ .button-71 { background-color: #dca3ff; border: 0; border-radius: 56px; color: #fff; cursor: pointer; display: inline-block; font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif; font-size: 18px; font-weight: 600; outline: 0; padding: 16px 21px; position: relative; text-align: center; text-decoration: none; transition: all .3s; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-71:before { background-color: initial; background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%); border-radius: 125px; content: ""; height: 50%; left: 4%; opacity: .5; position: absolute; top: 0; transition: all .3s; width: 92%; } .button-71:hover { box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px; transform: scale(1.05); } @media (min-width: 768px) { .button-71 { padding: 16px 48px; } } </style> </html>

<html> <button class="button-17" role="button">Pink Check Button</button> <style> .button-17 { align-items: center; appearance: none; background-color: #fff; background-image: url('https://i.ibb.co/2P4CsV5/check6-pk1.gif'); border-radius: 24px; border-style: none; box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0; box-sizing: border-box; color: #fff; text-shadow: 2px 2px 5px #704938, 0 0 25px #fa78bb, 0 0 5px pink; cursor: pointer; display: inline-flex; fill: currentcolor; font-family: "Google Sans",Roboto,Arial,sans-serif; font-size: 20px; font-weight: 500; height: 48px; justify-content: center; letter-spacing17: .25px; line-height: normal; max-width: 100%; overflow: visible; padding: 2px 24px; position: relative; text-align: center; text-transform: none; transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: auto; will-change: transform,opacity; z-index: 0; } .button-17:hover { background: #F6F9FE; background-image: url('https://i.ibb.co/3vJFJ8t/check6-gy1.gif'); color: #ffe8f4; } .button-17:active { box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%); outline: none; } .button-17:focus { outline: none; border: 2px solid #4285f4; } .button-17:not(:disabled) { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } .button-17:not(:disabled):hover { box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px; } .button-17:not(:disabled):focus { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } .button-17:not(:disabled):active { box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px; } .button-17:disabled { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } </style> </html>

<html> <button class="button-17" role="button">Blue Check Button</button> <style> .button-17 { align-items: center; appearance: none; background-color: #fff; background-image: url('https://i.ibb.co/nMxz7jr/check6-bl2.gif'); border-radius: 24px; border-style: none; box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0; box-sizing: border-box; color: #fff; text-shadow: 2px 2px 5px grey, 0 0 25px blue, 0 0 5px darkblue; cursor: pointer; display: inline-flex; fill: currentcolor; font-family: "Google Sans",Roboto,Arial,sans-serif; font-size: 20px; font-weight: 500; height: 48px; justify-content: center; letter-spacing17: .25px; line-height: normal; max-width: 100%; overflow: visible; padding: 2px 24px; position: relative; text-align: center; text-transform: none; transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: auto; will-change: transform,opacity; z-index: 0; } .button-17:hover { background: #fff; background-image: url('https://i.ibb.co/qMFSRdh/check6-pu1.gif'); color: #fff; } .button-17:active { box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%); outline: none; } .button-17:focus { outline: none; border: 2px solid #4285f4; } .button-17:not(:disabled) { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } .button-17:not(:disabled):hover { box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px; } .button-17:not(:disabled):focus { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } .button-17:not(:disabled):active { box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px; } .button-17:disabled { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } </style> </html>

<html> <button class="button-24" role="button">pink gingham button</button> <style> .button-24 { background: #FF4742; background-image:url('https://i.ibb.co/47R8pcQ/bg-gin4-pink1.gif'); border: 1px solid pink; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px; box-sizing: border-box; color: #FFFFFF; text-shadow: 2px 2px 5px grey; cursor: pointer; display: inline-block; font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif; font-size: 20px; font-weight: 800; line-height: 25px; min-height: 40px; outline: 0; padding: 5px 9px; text-align: center; text-rendering: geometricprecision; text-transform: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; width:200; } .button-24:hover, .button-24:active { background-color: initial; background-position: 0 0; color: #f299c1; text-shadow: 2px 8px 5px white; } .button-24:active { opacity: .5; } </style> </html>

<html> <button class="button-25" role="button">blue gingham button</button> <style> .button-25 { background: #FF4742; background-image:url('https://i.ibb.co/ZdZsfhR/bg-gin4-blue.gif'); border: 1px solid lightblue; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px; box-sizing: border-box; color: #FFFFFF; text-shadow: 2px 2px 5px grey; cursor: pointer; display: inline-block; font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif; font-size: 20px; font-weight: 800; line-height: 25px; min-height: 40px; outline: 0; padding: 5px 9px; text-align: center; text-rendering: geometricprecision; text-transform: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; width:200; } .button-25:hover, .button-25:active { background-color: initial; background-position: 0 0; color: skyblue; text-shadow: 2px 8px 5px white; } .button-25:active { opacity: .5; } </style> </html>

Web Goodies

Site Templates

Fonts

04b_30

Rainy Hearts

Nintendo DS BIOS

Daydream

Text Effects

Basic Shadow

Pink Shadow

Buttons

Extra Goodies