Buttons are one of the most common UI elements. It is used for users to interact with a system and take action by making selections. Pure CSS Primary Button is used to create a primary action button. The primary button is created using Pure CSS class.
Pure CSS Primary Buttons Class:
- pure-button-primary: This class is used to create the primary action button. his class is used alongside “pure-button” class.
Syntax:
-
Create a Primary Button using <a> Tag:
<a class="pure-button pure-button-primary" href="#">
Primary Button
</a>
-
Create a Primary Button using <button> Tag:
<button class="pure-button pure-button-primary">
Primary Button
</button>
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
integrity =
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin = "anonymous" >
</ head >
< body style = "text-align: center" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >Pure CSS Primary Buttons</ h3 >
< a class = "pure-button pure-button-primary" href = "#" >
Primary Button 1
</ a >
< button class = "pure-button pure-button-primary" >
Primary Button 2
</ button >
</ body >
</ html >
|
Output:
Pure CSS Primary Buttons
Reference: https://purecss.io/buttons/#primary-buttons
Last Updated :
30 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...