{"id":116,"date":"2019-07-25T15:27:15","date_gmt":"2019-07-25T20:27:15","guid":{"rendered":"https:\/\/wp.stolaf.edu\/site2017\/?page_id=116"},"modified":"2025-02-12T11:10:51","modified_gmt":"2025-02-12T17:10:51","slug":"adding-buttons","status":"publish","type":"page","link":"https:\/\/wp.stolaf.edu\/using-wordpress\/adding-buttons\/","title":{"rendered":"Adding Buttons"},"content":{"rendered":"

Insert Button Class<\/h2>\n

Using the btn<\/span> class id you are able to apply the button style to your link.<\/p>\n

    \n
  1. Edit the page and switch to the text editor.<\/li>\n
  2. Find the link.<\/li>\n
  3. Insert the class id as follows: class=\"btn\"<\/code><\/li>\n<\/ol>\n
    Example code:<\/h5>\n

    <a class=\"btn\" href=\"https:\/\/wp.stolaf.edu\/\">Link Label Text<\/a><\/code><\/p>\n

    Buttons: Default<\/h6>\n

    class=\"btn\"<\/code><\/p>\n

    \n
    \n
    \n
    \n
    Button 1<\/a><\/div>\n<\/div>\n
    \n
    Button 2<\/a><\/div>\n<\/div>\n
    \n
    Button 3<\/a><\/div>\n<\/div>\n
    \n
    Button 4<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    Buttons: Grey<\/h6>\n

    class=\"btn--grey\"<\/code><\/p>\n

    \n
    \n
    \n
    \n
    Button 1<\/a><\/div>\n<\/div>\n
    \n
    Button 2<\/a><\/div>\n<\/div>\n
    \n
    Button 3<\/a><\/div>\n<\/div>\n
    \n
    Button 4<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    Buttons: Purple (3 columns)<\/h6>\n

    class=\"btn--purple\"<\/code><\/p>\n

    \n
    \n
    \n
    \n
    Button 1<\/a><\/div>\n<\/div>\n
    \n
    Button 2<\/a><\/div>\n<\/div>\n
    \n
    Button 3<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    Buttons: Red (2 columns)<\/h6>\n

    class=\"btn--red\"<\/code><\/p>\n

    \n
    \n
    \n
    \n
    Button 1<\/a><\/div>\n<\/div>\n
    \n
    Button 2<\/a><\/div>\n<\/div>\n
    \n
    Button 3<\/a><\/div>\n<\/div>\n
    \n
    Button 4<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

    <\/p>\n\n\n

    \n