Shortcode pour le bouton d'action - Astuces CSS

Table des matières

Pour functions.php

 /* Shortcode to display an action button. */ add_shortcode( 'action-button', 'action_button_shortcode' ); function action_button_shortcode( $atts ) ( extract( shortcode_atts( array( 'color' => 'blue', 'title' => 'Title', 'subtitle' => 'Subtitle', 'url' => '' ), $atts )); return '' . $title . '' . $subtitle . '' . ''; )

Utilisation dans l'éditeur d'articles

(action-button color="blue" title="Download Now" subtitle="Version 1.0.1 - Mac OSX" url="#")

CSS pour le fichier style.css

N'inclut que le style «bleu», ajoutez-en d'autres comme vous le pouvez.

.action-button a:link, .action-button a:visited ( border-radius: 5px; display: inline-block; font: 700 16px Arial, Sans-Serif; margin: 0 10px 20px 0; -moz-border-radius: 5px; padding: 14px 18px; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,0.3); text-transform: uppercase; -webkit-border-radius: 5px; ) .action-button .subtitle ( display: block; font: 400 11px Arial, Sans-Serif; margin: 5px 0 0; ) .blue-button a:link, .blue-button a:visited ( background-color: #5E9CB9; background-image: -moz-linear-gradient(top, #5E9CB9, #4E7E95); background-image: -webkit-gradient(linear, left top, left bottom, from(#5E9CB9), to(#4E7E95)); color: #FFF; filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95')"; ) .blue-button a:hover ( background-color: #68A9C8; background-image: -moz-linear-gradient(top, #68A9C8, #598EA8); background-image: -webkit-gradient(linear, left top, left bottom, from(#68A9C8), to(#598EA8)); color: #FFF; filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8')"; )

Envoyé par Matt Adams.

Articles intéressants...