Block: Button

BUTTONS NORMAL

Button normal #1Button normal #2 Button normal #3Button normal #4Button normal #5

[button url="http://www.webdesign-flash.ro" target="_blank" background-color="#cf2e2e" color="#FFF" size="normal"]Button normal #1[/button]
[button url="http://www.webdesign-flash.ro" target="_blank" background-color="#fcb900" color="#FFF" size="normal"]Button normal #2[/button]
[button url="http://www.webdesign-flash.ro" target="_blank" background-color="#ff6900" color="#FFF" size="normal"]Button normal #3[/button]
[button url="http://www.webdesign-flash.ro" target="_blank" background-color="#00d084" color="#FFF" size="normal"]Button normal #4[/button]
[button url="http://www.webdesign-flash.ro" target="_blank" background-color="#0693e3" color="#FFF" size="normal"]Button normal #5[/button]

bUTTONS LARGE

Button large #1Button large #2 Button large #3Button large #4Button large #5

[button url="http://www.webdesign-flash.ro" target="_blank" background-color="#cf2e2e" color="#FFF" size="large"]Button large #1[/button]
[button url="http://www.webdesign-flash.ro" target="_blank" background-color="#fcb900" color="#FFF" size="large"]Button large #2[/button]
[button url="http://www.webdesign-flash.ro" target="_blank" background-color="#ff6900" color="#FFF" size="large"]Button large #3[/button]
[button url="http://www.webdesign-flash.ro" target="_blank" background-color="#00d084" color="#FFF" size="large"]Button large #4[/button]
[button url="http://www.webdesign-flash.ro" target="_blank" background-color="#0693e3" color="#FFF" size="large"]Button large #5[/button]

Button blocks are not semantically buttons, but links inside a styled div. 

If you do not add a link, a link tag without an anchor will be used.

Check to make sure that the text wraps correctly when the button has more than one line of text, and when it is extra long.

Buttons have three styles: 

If the theme has a custom color palette, test that background color and text color settings work correctly. 

Now lets test how buttons display together with large texts.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio.

Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor. Phasellus porttitor, metus non tincidunt dapibus, orci pede pretium neque, sit amet adipiscing ipsum lectus et libero. Aenean bibendum. Curabitur mattis quam id urna.

Vivamus dui. Donec nonummy lacinia lorem. Cras risus arcu, sodales ac, ultrices ac, mollis quis, justo. Sed a libero. Quisque risus erat, posuere at, tristique non, lacinia quis, eros.

Leave a Reply

Your email address will not be published. Required fields are marked *