Posts

Showing posts from December, 2019

Water

Image
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <a href =" # "> <span> Buttom </span> <div class =" wave "> </div> </a> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; box-sizing: border-box; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; } a{ position: relative; display: block; padding: 10px 30px;border: 2px solid #00aeff;text-transform: uppercase; font-size: 18px; letter-spacing: 4px; color: #00aeff; text-decoration: none; overflow:hidden;} a span{ position: relative; z-index: 1; transition: 1s;} a:hover span{color: #fff;} a .wave{position: absolute; top: calc(100% + 22px); left: 0px; width: 100%; height: 100%; background: linear-gradient(to bottom, #0943a4, #1fa7f4); transition: 1s;} a:hover .wave...
Post a Comment
Read more

Black

Image
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <a href =" # "> <span> Button </span> <div class =" liquid "> </div> </a> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; box-sizing: border-box; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } a{ position: relative; padding: 20px 50px; display: block; text-decoration: none; text-transform: uppercase; width: 200px; overflow: hidden; } a span{ position: relative; z-index: 1; color: #fff; font-size: 20px; letter-spacing: 8px; } a .liquid{ position: absolute; left: 0px; top: -80px; width: 200px; height: 200px; background: #4973ff; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); transiti...
Post a Comment
Read more