Usando el ejemplo de la publicación de Maxbutton aquí¿cómo mostrar una rueda giratoria después de hacer clic en el botón?
A continuación se muestra el código de ejemplo de la publicación:
funciones.php
function custom_button_shortcode( $atts, $content = null ) {
// shortcode attributes
extract( shortcode_atts( array(
'url' => '',
'title' => '',
'target' => '',
'text' => '',
), $atts ) );
$content = $text ? $text : $content;
// Returns the button with a link
if ( $url ) {
$link_attr = array(
'href' => esc_url( $url ),
'title' => esc_attr( $title ),
'target' => ( 'blank' == $target ) ? '_blank' : '',
'class' => 'custombutton'
);
$link_attrs_str="";
foreach ( $link_attr as $key => $val ) {
if ( $val ) {
$link_attrs_str .= ' ' . $key . '="' . $val . '"';
}
}
return '<a' . $link_attrs_str . '><span>' . do_shortcode( $content ) . '</span></a>';
}
// Return as span when no link defined
else {
return '<span class="custombutton"><span>' . do_shortcode( $content ) . '</span></span>';
}
}
add_shortcode( 'custombutton', 'custom_button_shortcode' );
CSS
.custombutton{
font-size: 15px;
font-weight: 600;
line-height: 1.5;
display: inline-block;
padding: 0.8em 1em;
color: #fff;
border-radius: 3px;
background: #328de3;
margin: 0% 3px 0 3px
}
Código abreviado de botón
[custombutton url="https://maxbuttons.com/" target="self" text="Go To MaxButtons"]
Intenté usar CSS (código a continuación), pero no parece funcionar.
.custombutton.loading:after{
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 1s linear infinite; /* Safari */
animation: spin 1s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
¿Podría alguien por favor iluminarme y mostrarme el camino?
.