Штрих-код кнопки

Я пытаюсь создать специальный короткий код с несколькими вариантами цвета и размера. Однако, когда я пытаюсь использовать короткий код в своем сообщении, он не появляется.

Моя функция

function btn($atts, $content = null) { extract(shortcode_atts(array('link' => '#', 'color' => 'teal' , 'size' => 'large'), $atts)); return '<a class="btn '.$size.'" href="'.$link.'" style="background:'.$color.';"><span>' . do_shortcode($content) . '</span></a>'; } 

Как я использую короткий код

 [btn color="blue" size="large"]Button Text[/btn] 

Мой CSS

 /* Buttons */ .btn {background:#222 url(img/alert-overlay.png) repeat-x; display:inline-block; padding:5px 10px 6px; color:#fff!important; text-decoration:none; font-weight:bold; line-height:1; -moz-border-radius:5px; -webkit-border-radius:5px; position:relative; cursor:pointer; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); text-shadow:0 -1px 1px rgba(0,0,0,0.25); border-bottom:1px solid rgba(0,0,0,0.25)} .btn:active{-webkit-transform:translateY(1px); -moz-transform:translateY(1px)} /* Sizes ---------- */ .small { font-size: 11px; margin:10px 0 } .medium { font-size: 13px; margin:10px 0 } .large { font-size: 14px; padding: 8px 14px 9px; margin:10px 0 } /* Colors ---------- */ .blue { background-color: #2daebf } .red { background-color: #e33100 } .magenta { background-color: #a9014b } .orange { background-color: #ff5c00 } .yellow { background-color:#ffb515 } 

Solutions Collecting From Web of "Штрих-код кнопки"