|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="wrap"> <div class="link link_fill"> <a href="https://www.google.com/search?q=squircle&oq=squircle&aqs=chrome..69i57j69i59j0l3j69i60l3.9742j0j1&sourceid=chrome&ie=UTF-8" target="_blank" >Перейти в магазин</a> </div> <div class="link link_outline"> <a href="https://www.google.com/search?q=squircle&oq=squircle&aqs=chrome..69i57j69i59j0l3j69i60l3.9742j0j1&sourceid=chrome&ie=UTF-8" target="_blank" >Связаться с нами</a> </div> </div> <script> if ("paintWorklet" in CSS) { CSS.paintWorklet.addModule( "https://www.unpkg.com/css-houdini-squircle@0.1.3/squircle.min.js" ); } else { alert('not-work') } </script> <!-- Works in Chrome, Safari by flag --> <!-- https://pavellaptev.github.io/squircle-houdini-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 |
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); body { box-sizing: border-box; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; padding: 40px; background: #CFFFB9; } .wrap { display: flex; flex-wrap: wrap; justify-content: center; } // Set the button link style .link { font-family: 'Montserrat', sans-serif; font-size: 36px; margin: 8px; transition: all 0.2s ease; // common SQUIRCLE props --squircle-radius: 20px; --squircle-smooth: 1; // Set the basic <a> style a { display: block; color: white; text-decoration: none; padding: 16px 24px; transition: all 0.2s ease; } // Styles for FILL &_fill { background: #19ADFF; // SQUIRCLE props mask: paint(squircle); // Hover effect &:hover { background: #6923FF; } } // Styles for OUTLINE &_outline { position: relative; a { position: relative; z-index:1; color: #f45; } &:after { content: ""; display: block; position: absolute; z-index:0; top: 0; left: 0; width: 100%; height: 100%; background: #f45; transition: all 0.2s ease; // SQUIRCLE props mask: paint(squircle); --squircle-outline: 2px; } // Hover effect &:hover { &:after { background: #6923FF; } a { color: #6923FF; } } } } |
