Question

0

281

Vistas

Cómo hacer un botón con forma de hueso

Actualmente estoy experimentando con un botón para mi sitio web. Quiero que se vea como un botón promedio pero, una vez que lo pasas, se convierte en un hueso (mi sitio web es sobre perros).

Así que utilicé un proyecto codepen ya existente y terminé con esto:

 :root { --bg: #1a1e24; --color: #eee; --font: Montserrat, Roboto, Helvetica, Arial, sans-serif; } .wrapper { padding: 1.5rem 0; filter: url('#goo'); } .bone { display: inline-block; text-align: center; background: var(--color); color: var(--bg); font-weight: bold; padding: 1em 1em 1.03em; line-height: 1; border-radius: 0.4em; position: relative; min-width: 8.23em; text-decoration: none; font-family: var(--font); font-size: 1.25rem; } .bone:before, .bone:after { width: 2em; height: 2em; position: absolute; content: ""; display: inline-block; background: var(--color); border-radius: 50%; transition: transform 1s ease; transform: scale(0); z-index: -1; } .bone:before { top: 50%; right: -10%; } .bone:after { bottom: 50%; right: -10%; } .bone:hover:before, .bone:hover:after { transform: none; } /* Demo styles */ body { width: 100%; height: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--bg) }

 <div class="wrapper"> <a class="bone" href="#">Woof woof</a> </div> <!-- Filter: https://css-tricks.com/gooey-effect/ --> <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>

Como puede ver, he podido crear la forma del hueso en el lado derecho del botón usando los elementos ::before y ::after .

Sin embargo, ahora que quiero hacer lo mismo para el lado izquierdo, realmente no puedo hacerlo porque ya he usado ::before y ::after .

¿Hay alguna forma de hacer lo mismo en el lado izquierdo del botón?

over 4 years ago · Santiago Trujillo

4 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-03-08T19:29:28.329Z

¡Hagámoslo simple! Puede agregar un span dentro de a etiqueta y con eso tener nuevos pseudo elementos disponibles para hacer la parte izquierda del hueso

 :root { --bg: #1a1e24; --color: #eee; --font: Montserrat, Roboto, Helvetica, Arial, sans-serif; } .bone { filter: url('#goo'); display: inline-block; text-align: center; background: var(--color); color: var(--bg); font-weight: bold; padding: 1em 1em 1.03em; line-height: 1; border-radius: 0.4em; position: relative; min-width: 8.23em; text-decoration: none; font-family: var(--font); font-size: 1.25rem; } .bone::before, .bone::after, .bone span::before, .bone span::after { content: ""; width: 2em; height: 2em; position: absolute; display: inline-block; background: var(--color); border-radius: 50%; transition: transform 1s ease; transform: scale(0); z-index: -1; } /*top*/ .bone::before, .bone span::before { top: 50%; } /*bottom*/ .bone::after, .bone span::after { bottom: 50%; } /*right*/ .bone::before, .bone::after { right: -10%; } /*left*/ .bone span::before, .bone span::after { left: -10%; } .bone:hover::before, .bone:hover::after, .bone:hover span::before, .bone:hover span::after { transform: none; } /* Demo styles */ body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--bg) }

 <a class="bone" href="#"> <span>Woof woof</span> </a> <!-- Filter: https://css-tricks.com/gooey-effect/ --> <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>

Answer 2 · 2022-03-08T19:29:28.664Z

 :root { --bg: #1a1e24; --color: #eee; --font: Montserrat, Roboto, Helvetica, Arial, sans-serif; } .wrapper { padding: 1.5rem 0; filter: url('#goo'); } .bone { display: inline-block; text-align: center; background: var(--color); color: var(--bg); font-weight: bold; padding: 1em 1em 1.03em; line-height: 1; border-radius: 0.4em; position: relative; min-width: 8.23em; text-decoration: none; font-family: var(--font); font-size: 1.25rem; } .bone-left { position: absolute; top: 30px; right: -15px; } .bone-right { position: absolute; top: 30px; left: 15px; } .bone .bone-left:before, .bone .bone-left:after, .bone .bone-right:before, .bone .bone-right:after { width: 2em; height: 2em; position: absolute; content: ""; display: inline-block; background: var(--color); border-radius: 50%; transition: transform 1s ease; transform: scale(0); z-index: -1; } .bone .bone-left:before, .bone .bone-right:before { top: 50%; right: -10%; } .bone .bone-left:after, .bone .bone-right:after { bottom: 50%; right: -10%; } .bone:hover .bone-left:before, .bone:hover .bone-left:after, .bone:hover .bone-right:before, .bone:hover .bone-right:after { transform: none; } /* Demo styles */ body { width: 100%; height: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--bg) }

 <div class="wrapper"> <a class="bone" href="#"> <span class="bone-left"></span> <span>Woof woof</span> <span class="bone-right"></span> </a> </div> <!-- Filter: https://css-tricks.com/gooey-effect/ --> <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>

Answer 3 · 2022-03-08T19:29:29.000Z

Una idea diferente de animación con menos código:

 :root { --bg: #1a1e24; --color: #eee; --font: Montserrat, Roboto, Helvetica, Arial, sans-serif; } .bone { display: inline-block; text-align: center; background: var(--color); color: var(--bg); font-weight: bold; padding: 1em 1em 1.03em; line-height: 1; border-radius: 0.4em; position: relative; min-width: 8.23em; text-decoration: none; font-family: var(--font); font-size: 1.25rem; filter: url('#goo'); } .bone:before { content: ""; position: absolute; top:-1em; bottom:-1em; left:0; right:0; background: radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top left, radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top right, radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom left, radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom right; background-size: 0 0; background-repeat:no-repeat; transition:0.8s ease-out; } .bone:hover::before { background-size: 50px 50px; left:-1em; right:-1em; } /* Demo styles */ body { min-height: 100vh; margin:0; display: flex; justify-content: center; align-items: center; background: var(--bg) }

 <a class="bone" href="#">Woof woof</a> <!-- Filter: https://css-tricks.com/gooey-effect/ --> <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>

Puede ajustar diferentes valores para controlar la forma final usando variables CSS:

 .bone { --ty:-1em; --tx:-1em; --s:50px; display: inline-block; text-align: center; background: var(--color); color: var(--bg); font-weight: bold; padding: 1em 1em 1.03em; margin:2em; line-height: 1; border-radius: 0.4em; position: relative; min-width: 8.23em; text-decoration: none; font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif; font-size: 1.25rem; filter: url('#goo'); } .bone:before { content: ""; position: absolute; top:var(--ty); bottom:var(--ty); left:0; right:0; background: radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top left, radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top right, radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom left, radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom right; background-size: 0 0; background-repeat:no-repeat; transition:0.7s; } .bone:hover::before { background-size: var(--s) var(--s); left:var(--tx); right:var(--tx); } body { background:var(--bg); --bg:#1a1e24; --color:#eee; }

 <a class="bone" href="#">Woof woof</a> <a class="bone" href="#" style="--ty:-0.5em;--s:35px;">Woof woof</a> <a class="bone" href="#" style="--tx:-0.5em;--s:40px;">Woof </a> <a class="bone" href="#" style="--tx:-1.2em;--ty:-1.3em;--s:55px;">Woof </a> <!-- Filter: https://css-tricks.com/gooey-effect/ --> <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>

Todavía otro tipo de animación:

 .bone { --ty:-1em; --tx:-1em; --s:50px; display: inline-block; text-align: center; background: var(--color); color: var(--bg); font-weight: bold; padding: 1em 1em 1.03em; margin:2em; line-height: 1; border-radius: 0.4em; position: relative; z-index:0; min-width: 8.23em; text-decoration: none; font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif; font-size: 1.25rem; filter: url('#goo'); } .bone:before { content: ""; position: absolute; z-index:-1; top:50%; bottom:50%; left:0; right:0; background: radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top left, radial-gradient(farthest-side,var(--color) 98%,transparent 100%) top right, radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom left, radial-gradient(farthest-side,var(--color) 98%,transparent 100%) bottom right; background-size: var(--s) var(--s); background-repeat:no-repeat; transition:0.6s; } .bone:hover::before { top:var(--ty); bottom:var(--ty); left:var(--tx); right:var(--tx); } body { background:var(--bg); --bg:#1a1e24; --color:#eee; }

 <a class="bone" href="#">Woof woof</a> <a class="bone" href="#" style="--ty:-0.5em;--s:35px;">Woof woof</a> <a class="bone" href="#" style="--tx:-0.5em;--s:40px;">Woof </a> <a class="bone" href="#" style="--tx:-1.2em;--ty:-1.3em;--s:55px;">Woof </a> <!-- Filter: https://css-tricks.com/gooey-effect/ --> <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>

Answer 4 · 2022-03-08T19:29:29.396Z

Prueba esto: botón de hueso

 :root { --bg: #1a1e24; --color: #eee; --font: Montserrat, Roboto, Helvetica, Arial, sans-serif; } .wrapper { padding: 1.5rem 0; filter: url('#goo'); } .bone { display: inline-block; text-align: center; background: var(--color); color: var(--bg); font-weight: bold; padding: 0.8em 0.5em 0.8em; line-height: 1; border-radius: 0.4em; position: relative; min-width: 8.23em; text-decoration: none; font-family: var(--font); font-size: 1.25rem; } .bone::before, .bone::after, .bone span::before, .bone span::after { width: 2.3em; height: 2.3em; position: absolute; content: ""; display: inline-block; background: var(--color); border-radius: 50%; transition: transform 1s ease; transform: scale(0); z-index: -1; } .bone::before { top: 50%; right: -10%; } .bone::after { bottom: 50%; right: -10%; } .bone span::before { top: 50%; left: -10%; } .bone span::after { bottom: 50%; left: -10%; } .bone:hover::before, .bone:hover::after, .bone:hover span::before, .bone:hover span::after { transform: none; } /* Demo styles */ body { width: 100%; height: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--bg) }

 <div class="wrapper"> <a class="bone" href="#"> <span>Woof woof</span> </a> </div> <!-- Filter: https://css-tricks.com/gooey-effect/ --> <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>

0

281

Cómo hacer un botón con forma de hueso

4 Respuestas

0

0

0

0

Encuentra empleos remotos

Andres GPT