Open In App

Semantic-UI Advertisement Button Type

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

An advertisement is used to display the content of a third party. Its goal is to promote the third party by displaying its content. A match sponsor is an example of the way third-party content is promoted. The sponsor’s name is always taken during that specific match being played. 

Semantic UI provides us with this advertisement component which can be very essential on our website. There are many different types of advertisements that one can create with the help of Semantic UI. 

Semantic UI Advertisement Button Type Class:

  • button: It is a class that is used to create an advertisement in the form of a button. This button can have different shapes such as square, rectangle, etc. 

Syntax:

<div class="ui button test ad" data-text="...">
  ...
</div>

Example 1: In the following program, we will be creating a single Advertisement Button.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Semantic-UI Advertisement Button Type</title>
    <link rel="stylesheet" 
          href=
</head>
  
<body>
    <br>
    <div class="ui green huge header">
      GeeksforGeeks
    </div>
    <div class="ui big header">
       Advertisement Button Type
     </div>    
    <!--Advertisement Button-->
    <div class="ui button test ad"
         data-text="Ad Button"></div
</body>
</html>


Output:

Semantic-UI Advertisement Button Type

Semantic-UI Advertisement Button Type

Example 2: In the following program, we will be creating a single advertisement button.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href=
</head>
  
<body>
    <br>
    <div class="ui green huge header">
      GeeksforGeeks
    </div>
    <div class="ui big header">
       Normal Button 
    </div>    
    <!--Advertisement Button-->
    <div class="ui button test ad"
         data-text="Normal Button">
     </div
    <div class="ui big header">
        Square Button
     </div>   
     <div class="ui square button test ad"
          data-text="Square Button">
     </div>
     <div class="ui big header">
        Small Button 
       </div>   
     <div class="ui small button test ad" 
          data-text="Small Button">
     </div>
     <div class="ui big header">
       Big Button 
      </div>   
    <div class="ui big button test ad"
         data-text="Big Button">
     </div>
</body>
</html>


Output:

Semantic-UI Advertisement Button Type

Semantic-UI Advertisement Button Type

Reference: https://semantic-ui.com/views/advertisement.html#button



Last Updated : 11 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads