Eylem Düğmesi için Kısa Kod - CSS Hileleri

Anonim

Functions.php için

 /* 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 . '' . ''; )

Yazı Düzenleyicide Kullanım

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

Style.css dosyası için CSS

Yalnızca "mavi" stili içerir, elinizden geldiğince başkalarını ekleyin.

.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')"; )

Matt Adams tarafından gönderildi.