Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Advertisement Button Type

Improve Article
Save Article
  • Last Updated : 11 Mar, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up

Start Your Coding Journey Now!