Buttons Last updated: 01.07.2020

Button 1

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
PNA Button Example:
HTML Output
                  <button type="button" class="tl-line-btn-1">
    <i class="fa fa-arrow-circle-right tl-fa-icon"></i>  
    Location
</button>
&lt;button type=&quot;button&quot; class=&quot;tl-line-btn-1&quot;&gt; &lt;i class=&quot;fa fa-arrow-circle-right tl-fa-icon&quot;&gt;&lt;/i&gt; Location &lt;/button&gt;

Button 2

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
PNA Button Example:
HTML Output
                  <button type="button" class="tl-line-btn-2">
    <div class="tl-line-img-icon">
        <img src="/wiki/assets/images/ux-button-img.png" alt="round-icon">
    </div>
    Location
</button>
&lt;button type=&quot;button&quot; class=&quot;tl-line-btn-2&quot;&gt; &lt;div class=&quot;tl-line-img-icon&quot;&gt; &lt;img src=&quot;/wiki/assets/images/ux-button-img.png&quot; alt=&quot;round-icon&quot;&gt; &lt;/div&gt; Location &lt;/button&gt;

Button 3

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset

EDU Button Example:
HTML Output
                  <button type="button" class="tl-grad-btn-1">Find Schools</button>
&lt;button type=&quot;button&quot; class=&quot;tl-grad-btn-1&quot;&gt;Find Schools&lt;/button&gt;

Button 4

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
BND Button Example:
HTML Output
                  <button type="button" class="tl-flat-btn-1">Find Schoos </button>
&lt;button type=&quot;button&quot; class=&quot;tl-flat-btn-1&quot;&gt;Find Schoos &lt;/button&gt;

Button 5

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset

BSD Button Example:
HTML Output
                  <button type="button" class="tl-grad-btn-2">Find Schools</button>
&lt;button type=&quot;button&quot; class=&quot;tl-grad-btn-2&quot;&gt;Find Schools&lt;/button&gt;

Button 6

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
Square Button Example:
HTML Output
                  <button type="button" class="tl-square-btn">Search </button>
&lt;button type=&quot;button&quot; class=&quot;tl-square-btn&quot;&gt;Search &lt;/button&gt;

Button 7

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
Square with icon Button Example:
HTML Output
                    <button type="button" class="tl-square-icon-btn">Search <i class="fa fa-arrow-right tl-fa-icon"></i></button>
&lt;button type=&quot;button&quot; class=&quot;tl-square-icon-btn&quot;&gt;Search &lt;i class=&quot;fa fa-arrow-right tl-fa-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt;

Button 8

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
Rounded Button Example:
HTML Output
                  <button type="button" class="tl-rounded-btn">Search </button>
&lt;button type=&quot;button&quot; class=&quot;tl-rounded-btn&quot;&gt;Search &lt;/button&gt;

Button 9

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
Rounded Button with icon Example:
HTML Output
                  <button type="button" class="tl-rounded-icon-btn">Search <i class="fa fa-arrow-right tl-fa-icon"></i></button>
&lt;button type=&quot;button&quot; class=&quot;tl-rounded-icon-btn&quot;&gt;Search &lt;i class=&quot;fa fa-arrow-right tl-fa-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt;

Button 10

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
Line Button Example:
HTML Output
                  <button type="button" class="tl-line-btn-3">Website</button>
&lt;button type=&quot;button&quot; class=&quot;tl-line-btn-3&quot;&gt;Website&lt;/button&gt;

Button 11

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
Line Button with icon Example:
HTML Output
                  <button type="button" class="tl-line-btn-4">Website <i class="fa fa-arrow-right tl-fa-icon"></i></button>
&lt;button type=&quot;button&quot; class=&quot;tl-line-btn-4&quot;&gt;Website &lt;i class=&quot;fa fa-arrow-right tl-fa-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt;