Buttons

Buttons come in five colors: Red, silver, oat, orange, and blue.

Nulla ultrices tincidunt ornare.

Nulla ultrices tincidunt ornare.

Nulla ultrices tincidunt ornare.

Nulla ultrices tincidunt ornare.

Nulla ultrices tincidunt ornare.

Create a button

Instructions for creating a button can be found in the Drupal 101 documentation.

Align a button

The WYSIWYG editor sees the buttons as text, so you can format them as you would text. Use the align buttons (text align ) to align your button to the left, center, or right.

To align two buttons on the same line, they must be contained within the same paragraph.

Click on the Source button in the WYSIWYG editor (top-left). Find the button's text.

<p><a class="button button-blue" href="http://rwd.docs.rutgers.edu/%3Ca%20href%3D"http://google.com">http://google.com">Nulla ultrices tincidunt ornare. </a></p>

<p><a class="button button-blue" href="http://rwd.docs.rutgers.edu/%3Ca%20href%3D"http://google.com">http://google.com">Nulla ultrices tincidunt ornare. </a></p>

Note that each button is contained within its own set of paragraph tags: <p> </p>. Paragraph tags automatically insert a line break. Remove the paragraph tags from the end of the top line, and the beginning of the second line.

<p><a class="button button-blue" href="http://rwd.docs.rutgers.edu/%3Ca%20href%3D"http://google.com">http://google.com">Nulla ultrices tincidunt ornare. </a></p>

<p><a class="button button-blue" href="http://rwd.docs.rutgers.edu/%3Ca%20href%3D"http://google.com">http://google.com">Nulla ultrices tincidunt ornare. </a></p>

The code should now look like this:

<p><a class="button button-blue" href="http://rwd.docs.rutgers.edu/%3Ca%20href%3D"http://google.com">http://google.com">Nulla ultrices tincidunt ornare. </a> <a class="button button-blue" href="http://rwd.docs.rutgers.edu/%3Ca%20href%3D"http://google.com">http://google.com">Nulla ultrices tincidunt ornare. </a></p>

Save the page.