Homecss button Subscribe Button Using HTML & CSS | Web Push Notification | bySagar Developer -September 04, 2021 1 Hello Readers, Welcome to my other Blog, today in this Blog I'm going to create a Working Subscribe Button using HTML and CSS.Video Tutorial Of Subscribe Button Using CSS:In the video, you have seen the demo of this and I hope you love it.Source Code: index.html Subscribe Button - Sagar Developer Sagar Developer Subscribe Our YouTube Channel SUBSCRIBE style.css @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { height: 100vh; background-color: #f2f2f2; overflow: hidden; } .container { position: absolute; right: 30px; bottom: 30px; } .container .box { position: relative; background-color: #fff; display: flex; align-items: center; border-radius: 6px; padding: 15px 25px 15px 15px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); animation: show_box 0.8px ease forwards; } .container .box i { position: absolute; right: 15px; top: 10px; color: #666; cursor: pointer; transition: all 0.3s ease; } .container i:hover { color: #000; } .container .logo { height: 90px; width: 90px; margin-right: 15px; } .container .logo img { height: 100%; width: 100%; object-fit: cover; } .box .right { display: flex; flex-direction: column; } .box .right .text-1 { font-size: 18px; font-weight: 600; color: #333; } .box .right .text-2 { font-size: 14px; color: #666; margin: 2px 0 8px 0; } .box .right a { font-size: 18px; font-weight: 500; text-decoration: none; display: block; padding: 8px 0; background: #eabf13; border-radius: 6px; color: #fff; text-align: center; transition: all 0.4s ease; } .box .right a:hover { background-color: #fdd019; } @keyframes show_box { 0% { transform: translateX(100%); } 40% { transform: translateX(-5%); } 80% { transform: translateX(0%); } 100% { transform: translateX(-10%); } } #hide:checked~.box { animation: hide_box 0.8s ease forwards; } @keyframes hide_box { 0% { transform: translateX(0%); } 40% { transform: translateX(5%); } 80% { transform: translateX(0%); } 100% { transform: translateX(calc(100% + 35px)); } } .container #hide { display: none; }
That's amazing informative post, I want to add one more thing, If you want to make your web visitor to your subscriber then you should definitely check gravitec lifetime deal Best push notification for website ever.
ReplyDeletePost a Comment