Пример:
Выбрать другой фон для примера:
HTML:
|
1 2 3 4 5 6 7 8 9 |
<div class="glass-btn glass-btn-red"> <a href="#url">Подробнее</a> </div> <div class="glass-btn glass-btn-blue"> <a href="#url">Подробнее</a> </div> <div class="glass-btn glass-btn-green"> <a href="#url">Подробнее</a> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
.glass-btn { position: relative; width: 220px; height: 50px; margin: 20px; display: inline-block; text-align: center; } .glass-btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.05); box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3); border-radius: 30px; padding: 0 10px; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; overflow: hidden; color: #fff; font-family: "Roboto", sans-serif; font-weight: bold; font-size: 16px; z-index: 1; transition: 0.5s; backdrop-filter: blur(15px); } .glass-btn:hover a { letter-spacing: 3px; } .glass-btn a:before { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent); transform: skewX(45deg) translate(0); transition: 0.5s; filter: blur(0px); } .glass-btn:hover a:before { transform: skewX(45deg) translate(200px); } .glass-btn a:after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; transition: 0.5s; border-radius: 30px; z-index: -1; } .glass-btn:hover a:after { left: 0; top: 0; width: 100%; height: 100%; } .glass-btn:before { content: ""; position: absolute; left: 50%; transform: translatex(-50%); bottom: -5px; width: 30px; height: 10px; background: #f00; border-radius: 10px; transition: 0.5s; transition-delay: 0.5; } .glass-btn:hover:before { bottom: 0; height: 50%; width: 80%; border-radius: 30px; } .glass-btn:after { content: ""; position: absolute; left: 50%; transform: translatex(-50%); top: -5px; width: 30px; height: 10px; background: #f00; border-radius: 10px; transition: 0.5s; transition-delay: 0.5; } .glass-btn:hover:after { top: 0; height: 50%; width: 80%; border-radius: 30px; } .glass-btn.glass-btn-red a:after, .glass-btn.glass-btn-red:before, .glass-btn.glass-btn-red:after { background: #ff4747; box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747; } .glass-btn.glass-btn-blue a:after, .glass-btn.glass-btn-blue:before, .glass-btn.glass-btn-blue:after { background: #419cec; box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec; } .glass-btn.glass-btn-green a:after, .glass-btn.glass-btn-green:before, .glass-btn.glass-btn-green:after { background: #38ba35; box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
.glass-btn { position: relative; width: 220px; height: 50px; margin: 20px; display: inline-block; text-align: center; } .glass-btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.05); box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3); border-radius: 30px; padding: 0 10px; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; overflow: hidden; color: #fff; font-family: "Roboto", sans-serif; font-weight: bold; font-size: 16px; z-index: 1; transition: 0.5s; backdrop-filter: blur(15px); } .glass-btn:hover a { letter-spacing: 3px; } .glass-btn a:before { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent); transform: skewX(45deg) translate(0); transition: 0.5s; filter: blur(0px); } .glass-btn:hover a:before { transform: skewX(45deg) translate(200px); } .glass-btn a:after { content: ""; position: absolute; top: 100%; left: 50%; width: 0; height: 0; transition: 0.5s; border-radius: 30px; z-index: -1; } .glass-btn:hover a:after { left: 0; top: 0; width: 100%; height: 100%; } .glass-btn:before { content: ""; position: absolute; left: 50%; transform: translatex(-50%); bottom: -5px; width: 30px; height: 10px; background: #f00; border-radius: 10px; transition: 0.5s; transition-delay: 0.5; } .glass-btn:hover:before { bottom: 0; height: 80%; width: 80%; border-radius: 30px; } .glass-btn.glass-btn-red a:after, .glass-btn.glass-btn-red:before { background: #ff4747; box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747; } .glass-btn.glass-btn-blue a:after, .glass-btn.glass-btn-blue:before{ background: #419cec; box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec; } .glass-btn.glass-btn-green a:after, .glass-btn.glass-btn-green:before { background: #38ba35; box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35; } |
Добавить комментарий: