Pattern Library

Buttons
Information regarding all buttons can be found below

Button 1
Use: Loading reviews or other information on new page

Location
Button must be located below related content

Text
Font: Roboto
Size: 36
Colour: Thin black #000000
Text location: Centred
Effect: None

Colour
Linear 100%
Left: #D7F522 50%
Right: #5869FC 100%

Size
W: 360
H: 50
Corner: 60

View Reviews

Code html:

<button class="reviews">View Reviews</button>

Code css

width: 361px; height: 50px; left: 0px; top: 789px; background: linear-gradient(270deg, #5869FC -14.58%, rgba(215, 245, 34, 0.5) 112.64%); border-radius: 60px; }

Button 2
Use: Home button links to navigation page

Location
Button must be located at top right of page or within jumbotron

Colour
Linear 100%
Left: #FFF508 100%
Right: #66E800 0%

Size
W: 121
H: 56
Corner: 60

Code:

<button class="homebutton"></button>

Code css

width: 121px; height: 56px; left: 119px; top: 341px; background: linear-gradient(180deg, rgba(255, 245, 8, 0.1) 0%, rgba(102, 232, 0, 0) 100%, rgba(102, 232, 0, 0) 100%), url(../pictures/homebutton.png); background-repeat: no-repeat; background-size: 50px; background-position: center; border: 1px solid #49B1FC; box-sizing: border-box; border-radius: 60px; }

Button 3
Use: Takes the user to the next page when following a set path

Location
Bottom of pages that require it, pages that take the user on a path,
example would be a user booking a holiday

Text
Font: Roboto
Size: 36
Colour: Thin black #000000
Text location: Centred
Effect: None

Colour
Linear 100%
Left: #D7F522 50%
Right: #5869FC 100%

Size
W: 360
H: 50
Corner: 60

Next

Code:

<button class="next">Next</button>

Code css

width: 360px; height: 50px; left: 0px; top: 765px; background: linear-gradient(270deg, #5869FC -14.58%, rgba(215, 245, 34, 0.5) 112.64%); border-radius: 60px; }

Button 4
Use: Takes the user back a page when following a path

Location
Button must be located at the top of pages that require it,
pages that take the user on a path, example would be a user booking a holiday

Text
Font: Roboto
Size: 36
Colour: Thin black #000000
Text location: Centred
Effect: None

Colour
Linear 100%
Left: #D7F522 50%
Right: #5869FC 100%

Size
W: 360
H: 50
Corner: 60

Back

Code:

<button class="back">Back</button>

Code css

width: 360px; height: 50px; left: -1px; top: 110px; background: linear-gradient(270deg, #5869FC -14.58%, rgba(215, 245, 34, 0.5) 112.64%); border-radius: 60px; }

Button 5
Use: Text buttons within jumbotron

Location
Button must be located below content of jumbotron but within

Text
Font: Roboto
Size: 36
Colour: Thin #010301
Text location: Centred
Effect: None

Size
W: 180
H: 43
Corner: None

Code:

<button class="search"></button>

Code css

width: 110px; height: 43px; left: 125px; top: 400px; font-family: Roboto; font-style: normal; font-weight: 300; line-height: normal; font-size: 36px; color: #010301; }

Button 6
Use: Loading more related content

Location
Button must be located at bottom of page where more content can be loaded

Text
Font: Roboto
Size: 36
Colour: Thin black #000000
Text location: Centred
Effect: None

Colour
Linear 100%
Left: #D7F522 50%
Right: #5869FC 100%

Size
W: 360
H: 50
Corner: 60

Load more

Code:

<button class="load">Load more</button>

Code css

width: 360px; height: 50px; left: 0px; top: 1073px; background: linear-gradient(270deg, #5869FC -14.58%, rgba(215, 245, 34, 0.5) 112.64%); border-radius: 60px; }

Button 7
Use:Next image button

Location
Button must be within image at top right corner

Colour
Fill 100% #97E8E8

Size
W: 30
H: 50
Corner: 3
Rotation: -90

Code:

<button class="right"></button>

Code css

width: 30px; height: 50px; left: 362px; top: 160px; background: #97E8E8; border: 1px solid #000000; box-sizing: border-box; border-radius: 3px; transform: rotate(90deg); }

Button 8
Use:Go to previous image

Location
Button must be within image at top left corner

Colour
Fill 100% #97E8E8

Size
W: 30
H: 50
Corner: 3
Rotation: 90

Code:

<button class="left"></button>

Code css

width: 30px; height: 50px; left: 0px; top: 190px; background: #97E8E8; border: 1px solid #000000; box-sizing: border-box; border-radius: 3px; transform: rotate(-90deg); }

Jumbotron
The jumbotron used as a box on screen that holds button for a set task

Above shows an example of the jumbotron

Location
The jumbotron is used when a box is needed that can load other content
this would be located above or below starting content,
example once the user has finished booking a holiday a jumbotron
can be used to give the user a box with some text and a button

Text
Font: Roboto
Size: 18
Colour: Light #000000
Text location: Top within jumbotron
Effect: None

Colour
Linear 100%
Left: #00E0FF 100%
Right: #FFe600 0%

Button
Location: Below text
W:121 H:56 Corner:60
Link: Navigation page

Code:

<button class="homebutton"></button>

Code:

<button class="jumbotron"></button>

Code css

width: 328px; height: 229px; left: 16px; top: 208px; background: linear-gradient(291.03deg, #00E0FF 10.05%, rgba(255, 230, 0, 0.5) 106.06%); border: 1px solid #000000; box-sizing: border-box; border-radius: 10px;