none
BOTON CIRCULAR RRS feed

  • Pregunta

  • Hola,

    Espero me puedan ayudar, lo que deseo es tener botones circulares.

    Lo que tengo ahora:

    Lo que deseo:

    El codigo en HTML que tengo es el siguiente:

    <td>
                    @Html.ActionLink("Editar", "Edit", new { id = item.BahiaID }, htmlAttributes: new { @class = "btn btn-warning", style = "border-radius: 1000px 1000px;" })
                    @Html.ActionLink("Detalles", "Details", new { id = item.BahiaID }, htmlAttributes: new { @class = "btn btn-info" })
                    @Html.ActionLink("Eliminar", "Delete", new { id = item.BahiaID }, htmlAttributes: new { @class = "btn btn-danger" })
                    @Html.ActionLink("Anaqueles", "Index", "Anaqueles", new { id = item.BahiaID }, htmlAttributes: new { @class = "btn btn-primary" })
                </td>
    de antemano gracias por su apoyo.

    martes, 5 de febrero de 2019 21:46

Respuestas

  • Esto me sirvio mucho:

    https://codepen.io/jnbruno/pen/vNpPpW

    Solo basto poner un espacio en ves de letras, para dejar vacio los botones.

    • Marcado como respuesta Mixan Suazo martes, 5 de febrero de 2019 23:55
    martes, 5 de febrero de 2019 23:55

Todas las respuestas

  • Para hacer el botón redondo, simplemente ponle el border-radius igual a la mitad de la anchura (y de la altura, que configurarás para que sea igual a la anchura). Idealmente, genera un class con ese atributo y asígnale el class a todos los botones, en lugar de copiarles el style a todos los botones.

    Recuerda poner en el class todas las variantes del border-radius con distintos prefijos (-moz-border-radius, -webkit-border-radius, etc.), si quieres que funcione en los navegadores antiguos.

    https://www.w3schools.com/cssref/css3_pr_border-radius.asp

    https://www.the-art-of-web.com/css/border-radius/

    martes, 5 de febrero de 2019 21:58
  • Alberto, gracias por tu apoyo. Pero al ser circular el boton este no tendra ya las palabras Editat, Detalles..... como controlaria eso, ya que si lo quito de la siguiente manea:

    @Html.ActionLink("", "Edit" ............

    me da error.


    martes, 5 de febrero de 2019 22:07
  • Esto me sirvio mucho:

    https://codepen.io/jnbruno/pen/vNpPpW

    Solo basto poner un espacio en ves de letras, para dejar vacio los botones.

    • Marcado como respuesta Mixan Suazo martes, 5 de febrero de 2019 23:55
    martes, 5 de febrero de 2019 23:55