diff --git a/public/Buttons/HariPrasathBU_21ECA36-1/index.html b/public/Buttons/HariPrasathBU_21ECA36-1/index.html new file mode 100644 index 000000000..a9d717988 --- /dev/null +++ b/public/Buttons/HariPrasathBU_21ECA36-1/index.html @@ -0,0 +1,33 @@ + + + + + + + Document + + + + +
+
+ HOVER ME +
+
+ + +
+
+ HOVER ME +
+
+ + +
+
+ HOVER ME +
+
+ + + \ No newline at end of file diff --git a/public/Buttons/HariPrasathBU_21ECA36-1/style.css b/public/Buttons/HariPrasathBU_21ECA36-1/style.css new file mode 100644 index 000000000..194523ff5 --- /dev/null +++ b/public/Buttons/HariPrasathBU_21ECA36-1/style.css @@ -0,0 +1,182 @@ +@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'; + +html, +body { + width: 100%; + height: 100%; + overflow: hidden; + margin: 0; + display: flex; + flex-direction: column; + flex-wrap: wrap; + font-family: 'Open Sans Condensed', sans-serif; +} + +div[class*=box] { + height: 33.33%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.box-1 { background-color: #FF6766; } +.box-2 { background-color: #3C3C3C; } +.box-3 { background-color: #66A182; } + +.btn { + line-height: 50px; + height: 50px; + text-align: center; + width: 250px; + cursor: pointer; +} + +/* +======================== + BUTTON ONE +======================== +*/ +.btn-one { + color: #FFF; + transition: all 0.3s; + position: relative; +} +.btn-one span { + transition: all 0.3s; +} +.btn-one::before { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + opacity: 0; + transition: all 0.3s; + border-top-width: 1px; + border-bottom-width: 1px; + border-top-style: solid; + border-bottom-style: solid; + border-top-color: rgba(255,255,255,0.5); + border-bottom-color: rgba(255,255,255,0.5); + transform: scale(0.1, 1); +} +.btn-one:hover span { + letter-spacing: 2px; +} +.btn-one:hover::before { + opacity: 1; + transform: scale(1, 1); +} +.btn-one::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + transition: all 0.3s; + background-color: rgba(255,255,255,0.1); +} +.btn-one:hover::after { + opacity: 0; + transform: scale(0.1, 1); +} + + +/* +======================== + BUTTON TWO +======================== +*/ +.btn-two { + color: #FFF; + transition: all 0.5s; + position: relative; +} +.btn-two span { + z-index: 2; + display: block; + position: absolute; + width: 100%; + height: 100%; +} +.btn-two::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + transition: all 0.5s; + border: 1px solid rgba(255,255,255,0.2); + background-color: rgba(255,255,255,0.1); +} +.btn-two::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + transition: all 0.5s; + border: 1px solid rgba(255,255,255,0.2); + background-color: rgba(255,255,255,0.1); +} +.btn-two:hover::before { + transform: rotate(-45deg); + background-color: rgba(255,255,255,0); +} +.btn-two:hover::after { + transform: rotate(45deg); + background-color: rgba(255,255,255,0); +} + + +/* +======================== + BUTTON THREE +======================== +*/ +.btn-three { + color: #FFF; + transition: all 0.5s; + position: relative; +} +.btn-three::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + background-color: rgba(255,255,255,0.1); + transition: all 0.3s; +} +.btn-three:hover::before { + opacity: 0 ; + transform: scale(0.5,0.5); +} +.btn-three::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + opacity: 0; + transition: all 0.3s; + border: 1px solid rgba(255,255,255,0.5); + transform: scale(1.2,1.2); +} +.btn-three:hover::after { + opacity: 1; + transform: scale(1,1); +} \ No newline at end of file diff --git a/public/Buttons/HariPrasathBU_21ECA36/index.html b/public/Buttons/HariPrasathBU_21ECA36/index.html new file mode 100644 index 000000000..0b2f2c8c1 --- /dev/null +++ b/public/Buttons/HariPrasathBU_21ECA36/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + + Geeky-Button + + + + + \ No newline at end of file diff --git a/public/Buttons/HariPrasathBU_21ECA36/style.css b/public/Buttons/HariPrasathBU_21ECA36/style.css new file mode 100644 index 000000000..b06879eee --- /dev/null +++ b/public/Buttons/HariPrasathBU_21ECA36/style.css @@ -0,0 +1,72 @@ +html, +body { + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background: #000; +} + +.glow-on-hover { + width: 220px; + height: 50px; + border: none; + outline: none; + color: #fff; + background: #111; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; +} + +.glow-on-hover:before { + content: ''; + background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); + position: absolute; + top: -2px; + left:-2px; + background-size: 400%; + z-index: -1; + filter: blur(5px); + width: calc(100% + 4px); + height: calc(100% + 4px); + animation: glowing 20s linear infinite; + opacity: 0; + transition: opacity .3s ease-in-out; + border-radius: 10px; +} + +.glow-on-hover:active { + color: #000 +} + +.glow-on-hover:active:after { + background: transparent; +} + +.glow-on-hover:hover:before { + opacity: 1; +} + +.glow-on-hover:after { + z-index: -1; + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: #111; + left: 0; + top: 0; + border-radius: 10px; +} + +@keyframes glowing { + 0% { background-position: 0 0; } + 50% { background-position: 400% 0; } + 100% { background-position: 0 0; } +} \ No newline at end of file diff --git a/public/Buttons/hariPrasathBU/index.html b/public/Buttons/hariPrasathBU/index.html new file mode 100644 index 000000000..f6d60fae6 --- /dev/null +++ b/public/Buttons/hariPrasathBU/index.html @@ -0,0 +1,23 @@ + + + + + + + Document + + + +
+
+ Hover Me! +
+ + + +
+
+ +
+ + \ No newline at end of file diff --git a/public/Buttons/hariPrasathBU/style.css b/public/Buttons/hariPrasathBU/style.css new file mode 100644 index 000000000..f6e1fa18e --- /dev/null +++ b/public/Buttons/hariPrasathBU/style.css @@ -0,0 +1,64 @@ +body{ + font-family: 'Lato', sans-serif; + } + + .wrapper{ + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .link_wrapper{ + position: relative; + } + + a{ + display: block; + width: 250px; + height: 50px; + line-height: 50px; + font-weight: bold; + text-decoration: none; + background: #333; + text-align: center; + color: #fff; + text-transform: uppercase; + letter-spacing: 1px; + border: 3px solid #333; + transition: all .35s; + } + + .icon{ + width: 50px; + height: 50px; + border: 3px solid transparent; + position: absolute; + transform: rotate(45deg); + right: 0; + top: 0; + z-index: -1; + transition: all .35s; + } + + .icon svg{ + width: 30px; + position: absolute; + top: calc(50% - 15px); + left: calc(50% - 15px); + transform: rotate(-45deg); + fill: #2ecc71; + transition: all .35s; + } + + a:hover{ + width: 200px; + border: 3px solid #2ecc71; + background: transparent; + color: #2ecc71; + } + + a:hover + .icon{ + border: 3px solid #2ecc71; + right: -25%; + } \ No newline at end of file