diff --git a/public/Buttons/vijayan58/index.html b/public/Buttons/vijayan58/index.html new file mode 100644 index 000000000..fa1874c38 --- /dev/null +++ b/public/Buttons/vijayan58/index.html @@ -0,0 +1,15 @@ + + + + + + + Tanmay + + + + + + + + diff --git a/public/Buttons/vijayan58/style.css b/public/Buttons/vijayan58/style.css new file mode 100644 index 000000000..6971c835d --- /dev/null +++ b/public/Buttons/vijayan58/style.css @@ -0,0 +1,82 @@ +* { + margin: 0; + padding: 0; + border-color: #0cf804; +} + +body { + height: 100vh; + overflow: hidden; + display: flex; + align-items:end; + justify-content: center; + background-image: url(https://images.unsplash.com/photo-1483232539664-d89822fb5d3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80); + +} + +.noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + +} + +button { + width: 150px; + height: 50px; + padding: right 20px;; + cursor: all-scroll; + font-size: 20px; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + letter-spacing: 2px; + background: #e0dbd8; + border: 2px solid rgb(248, 241, 241); + box-shadow: 0px 0px 0px rgba(0,0,0,0.4); + transition: 500ms; + font-style: global(body); + +} + +button:after { + content: ''; + position: absolute; + transform: translateX(-55px) translateY(-40px); + width: 25px; + height: 25px; + border-radius: 50%; + background: transparent; + box-shadow: 0px 0px 50px transparent; + transition: 500ms; +} + +button:hover { + transform: perspective(animation); + box-shadow: 0dvb; +} + +button:hover:after { + background: white; + box-shadow: 0px 0px 20px #1447de, 0px 0px 30px #1447de, inset 0px 0px 10px #1447de; + animation: spin 1s infinite linear; + +} + +@keyframes spin{ + 25%{transform: translateX(-25px) translateY(-35px); + width: 15px; + height: 15px;} + 50% {transform: translateX(-55px) translateY(-30px); + width: 5px; + height: 5px;} + 75% {transform: translateX(-85px) translateY(-35px); + width: 15px; + height: 15px;} +} + +button:focus { + outline: none; +}