diff --git a/css part/btn.css b/css part/btn.css new file mode 100644 index 0000000..f029d2a --- /dev/null +++ b/css part/btn.css @@ -0,0 +1,169 @@ +.btn { + border: none; + font-family: 'Lato'; + font-size: inherit; + color: inherit; + background: none; + cursor: pointer; + padding: 25px 80px; + display: inline-block; + margin: 15px 30px; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 700; + outline: none; + position: relative; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + transition: all 0.3s; +} + +.btn:after { + content: ''; + position: absolute; + z-index: -1; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + transition: all 0.3s; +} + +/* Pseudo elements for icons */ +.btn:before { + font-family: 'FontAwesome'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + position: relative; + -webkit-font-smoothing: antialiased; +} + + +/* Icon separator */ +.btn-sep { + padding: 25px 60px 25px 120px; +} + +.btn-sep:before { + background: rgba(0,0,0,0.15); +} + +/* Button 1 */ +.btn-1 { + background: #3498db; + color: #fff; +} + +.btn-1:hover { + background: #2980b9; +} + +.btn-1:active { + background: #2980b9; + top: 2px; +} + +.btn-1:before { + position: absolute; + height: 100%; + left: 0; + top: 0; + line-height: 3; + font-size: 140%; + width: 60px; +} + +/* Button 2 */ +.btn-2 { + background: #2ecc71; + color: #fff; +} + +.btn-2:hover { + background: #27ae60; +} + +.btn-2:active { + background: #27ae60; + top: 2px; +} + +.btn-2:before { + position: absolute; + height: 100%; + left: 0; + top: 0; + line-height: 3; + font-size: 140%; + width: 60px; +} + +/* Button 3 */ +.btn-3 { + background: #e74c3c; + color: #fff; +} + +.btn-3:hover { + background: #c0392b; +} + +.btn-3:active { + background: #c0392b; + top: 2px; +} + +.btn-3:before { + position: absolute; + height: 100%; + left: 0; + top: 0; + line-height: 3; + font-size: 140%; + width: 60px; +} + +/* Button 3 */ +.btn-4 { + background: #34495e; + color: #fff; +} + +.btn-4:hover { + background: #2c3e50; +} + +.btn-4:active { + background: #2c3e50; + top: 2px; +} + +.btn-4:before { + position: absolute; + height: 100%; + left: 0; + top: 0; + line-height: 3; + font-size: 140%; + width: 60px; +} + +/* Icons */ + +.icon-cart:before { + content: "\f07a"; +} + +.icon-heart:before { + content: "\f55a"; +} + +.icon-info:before { + content: "\f05a"; +} + +.icon-send:before { + content: "\f1d8"; +} \ No newline at end of file diff --git a/css part/btn.html b/css part/btn.html new file mode 100644 index 0000000..03fed77 --- /dev/null +++ b/css part/btn.html @@ -0,0 +1,23 @@ + + + + + + + + Document + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/css part/index.html b/css part/index.html new file mode 100644 index 0000000..8d4ff20 --- /dev/null +++ b/css part/index.html @@ -0,0 +1,16 @@ + + + + + + + + buttons + + + + + + + + \ No newline at end of file diff --git a/css part/popup.css b/css part/popup.css new file mode 100644 index 0000000..69ac115 --- /dev/null +++ b/css part/popup.css @@ -0,0 +1,87 @@ +@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Outfit:wght@300;400;600;700&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500&display=swap'); +*{ + margin: 0; + padding: 0; + font-family: 'Poppins',sans-serif; + +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: rgb(167, 9, 167); +} +.container{ + position: relative; + width: 0px; + height: 0px; + background: rgb(231, 111, 231); + border-radius: 25px; + transition: 0.5s; + display: flex; + justify-content: center; + align-items: center; +} + + .active-container{ + height: 400px; + width:400px; + transition-delay: 0.3s; +} + .container::before{ + content: ''; + position: absolute; + bottom: -15px; + width: 40px; + height: 40px; + background:rgb(231, 111, 231); + border-radius: 5px; + transform: rotate(45deg); + transition: 0.3s; + opacity: 0; + + } + .active-container::before{ + transition-delay: 0.3s; + opacity: 1; + } + .togglebtn{ + position: absolute; + bottom: -20px; + min-width: 60px; + min-height: 60px; + background: paleturquoise; + border-radius: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + transition: 0.3s; + } + .togglebtn::before{ + content: '+'; + font-size: 2.5em; + color: black; + + } + .active-container .togglebtn{ + bottom: -90px; + transform: rotate(135deg); + background: red; + + } + .container .content{ + min-height: 400px; + padding: 40px; + color: rgb(19, 1, 16); + opacity: 0; + transition: 0.3s; + transform: scale(0); + } + .active-container .content{ + opacity: 1; + transition-delay: 0.3s; + transform: scale(1); + } + \ No newline at end of file diff --git a/css part/popup.html b/css part/popup.html new file mode 100644 index 0000000..8545d3a --- /dev/null +++ b/css part/popup.html @@ -0,0 +1,31 @@ + + + + + + + + Document + + + + +
+
+

Mojmaa..

+

vinit prantik radhika akash

+
+
+
+ + + + \ No newline at end of file diff --git a/css part/style.css b/css part/style.css new file mode 100644 index 0000000..d2a06d5 --- /dev/null +++ b/css part/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: 180px; + height: 50px; + border: none; + outline: none; + color: rgb(7, 7, 7); + background: #111; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 20px; +} + +.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: 20px; +} + +.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: rgb(236, 216, 216); + left: 0; + top: 0; + border-radius: 20px; +} + +@keyframes glowing { + 0% { background-position: 0 0; } + 50% { background-position: 400% 0; } + 100% { background-position: 0 0; } +} \ No newline at end of file