How to use the Button
Popular UI All Style (Typography, Elements, Gallery, etc) | How to use the Button
.png){kind=small}
MD Abu Sufian
---
.png "How to use the Button") |
| How to use the Button |
Table of Content
Button
1) Fill
Button Fill Code Here :
<a class="popular_button fill" href="#">Button</a>
<a class="popular_button fill" href="#"">
<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
<path d="M12 15V3"></path>
</svg>Download</a>
<a class="popular_button fill" href="#">
<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<path d="M12 9a3 3 0 1 0 0 6 3 3 0 1 0 0-6z"></path>
</svg>Demo</a>
<a class="popular_button fill" href="#">
<svg fill="none" height="46" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>Facebook</a>
<a class="popular_button fill" href="#">
<svg fill="none" height="46" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5 0-.278-.028-.556-.08-.83A7.72 7.72 0 0 0 23 3Z"></path>
</svg>Twitter</a>
<a class="popular_button fill" href="#">
<svg fill="currentColor" height="46" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M5.788 14.02a.746.746 0 0 0 .132.031 456.056 456.056 0 0 1 .845 2.002c.502 1.202 1.008 2.44 1.12 2.796.139.438.285.736.445.94.083.104.178.196.29.266a.88.88 0 0 0 .186.088c.32.12.612.07.795.009a1.313 1.313 0 0 0 .304-.15L9.91 20l2.826-1.762 3.265 2.502c.048.037.1.068.156.093.392.17.772.23 1.13.182.356-.05.64-.199.85-.368a1.994 1.994 0 0 0 .564-.728l.009-.022.003-.008.002-.004v-.002l.001-.001a.748.748 0 0 0 .04-.133l2.98-15.025a.752.752 0 0 0 .014-.146c0-.44-.166-.859-.555-1.112-.334-.217-.705-.227-.94-.209-.252.02-.486.082-.643.132a3.451 3.451 0 0 0-.26.094l-.011.005-16.714 6.556-.002.001a2.296 2.296 0 0 0-.167.069 2.522 2.522 0 0 0-.38.212c-.227.155-.75.581-.661 1.285.07.56.454.905.689 1.071.128.091.25.156.34.199.04.02.126.054.164.07l.009.003 3.169 1.067Zm14.138-9.152h-.002a.78.78 0 0 1-.026.011L3.164 11.444a.818.818 0 0 1-.026.01l-.01.003a1.126 1.126 0 0 0-.09.04.854.854 0 0 0 .086.043l3.142 1.058a.75.75 0 0 1 .16.076l10.377-6.075.01-.005a2.012 2.012 0 0 1 .124-.068 2.05 2.05 0 0 1 .317-.131c.09-.028.357-.107.645-.014a.854.854 0 0 1 .588.689.84.84 0 0 1 .003.424c-.07.275-.262.489-.438.653-.15.14-2.095 2.016-4.014 3.868l-2.613 2.52-.465.45 5.872 4.502a.536.536 0 0 0 .251.04.229.229 0 0 0 .117-.052.495.495 0 0 0 .104-.12v-.001l2.891-14.573a1.858 1.858 0 0 0-.267.086h-.002Zm-8.461 12.394-1.172-.898-.284 1.805 1.456-.907Zm-2.246-2.68 1.165-1.125 2.612-2.522.973-.938-6.52 3.817.035.082a339.2 339.2 0 0 1 1.22 2.92l.283-1.8a.747.747 0 0 1 .232-.435Z" fill-rule="evenodd"></path>
</svg>Telegram</a>
<a class="popular_button fill" href="#">
<svg fill="none" height="46" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
<path d="m9.75 15.02 5.75-3.27-5.75-3.27v6.54z"></path>
</svg>Youtube</a>
2) Outline
Button Outline Code Here :
<a class="popular_button outline" href="#">Button</a>
<a class="popular_button outline" href="#"">
<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
<path d="M12 15V3"></path>
</svg>Download</a>
<a class="popular_button outline" href="#">
<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<path d="M12 9a3 3 0 1 0 0 6 3 3 0 1 0 0-6z"></path>
</svg>Demo</a>
<a class="popular_button outline" href="#">
<svg fill="none" height="46" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>Facebook</a>
<a class="popular_button outline" href="#">
<svg fill="none" height="46" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5 0-.278-.028-.556-.08-.83A7.72 7.72 0 0 0 23 3Z"></path>
</svg>Twitter</a>
<a class="popular_button outline" href="#">
<svg fill="currentColor" height="46" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M5.788 14.02a.746.746 0 0 0 .132.031 456.056 456.056 0 0 1 .845 2.002c.502 1.202 1.008 2.44 1.12 2.796.139.438.285.736.445.94.083.104.178.196.29.266a.88.88 0 0 0 .186.088c.32.12.612.07.795.009a1.313 1.313 0 0 0 .304-.15L9.91 20l2.826-1.762 3.265 2.502c.048.037.1.068.156.093.392.17.772.23 1.13.182.356-.05.64-.199.85-.368a1.994 1.994 0 0 0 .564-.728l.009-.022.003-.008.002-.004v-.002l.001-.001a.748.748 0 0 0 .04-.133l2.98-15.025a.752.752 0 0 0 .014-.146c0-.44-.166-.859-.555-1.112-.334-.217-.705-.227-.94-.209-.252.02-.486.082-.643.132a3.451 3.451 0 0 0-.26.094l-.011.005-16.714 6.556-.002.001a2.296 2.296 0 0 0-.167.069 2.522 2.522 0 0 0-.38.212c-.227.155-.75.581-.661 1.285.07.56.454.905.689 1.071.128.091.25.156.34.199.04.02.126.054.164.07l.009.003 3.169 1.067Zm14.138-9.152h-.002a.78.78 0 0 1-.026.011L3.164 11.444a.818.818 0 0 1-.026.01l-.01.003a1.126 1.126 0 0 0-.09.04.854.854 0 0 0 .086.043l3.142 1.058a.75.75 0 0 1 .16.076l10.377-6.075.01-.005a2.012 2.012 0 0 1 .124-.068 2.05 2.05 0 0 1 .317-.131c.09-.028.357-.107.645-.014a.854.854 0 0 1 .588.689.84.84 0 0 1 .003.424c-.07.275-.262.489-.438.653-.15.14-2.095 2.016-4.014 3.868l-2.613 2.52-.465.45 5.872 4.502a.536.536 0 0 0 .251.04.229.229 0 0 0 .117-.052.495.495 0 0 0 .104-.12v-.001l2.891-14.573a1.858 1.858 0 0 0-.267.086h-.002Zm-8.461 12.394-1.172-.898-.284 1.805 1.456-.907Zm-2.246-2.68 1.165-1.125 2.612-2.522.973-.938-6.52 3.817.035.082a339.2 339.2 0 0 1 1.22 2.92l.283-1.8a.747.747 0 0 1 .232-.435Z" fill-rule="evenodd"></path>
</svg>Telegram</a>
<a class="popular_button outline" href="#">
<svg fill="none" height="46" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
<path d="m9.75 15.02 5.75-3.27-5.75-3.27v6.54z"></path>
</svg>Youtube</a>
3) Rounded
Button Rounded Code Here :
<a class="popular_button fill rounded" href="#">Button</a>
<a class="popular_button fill rounded" href="#">
<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
<path d="M12 15V3"></path>
</svg>Download</a>
<a class="popular_button fill rounded" href="#">
<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<path d="M12 9a3 3 0 1 0 0 6 3 3 0 1 0 0-6z"></path>
</svg>Demo</a>
<a class="popular_button fill rounded" href="#">
<svg fill="none" height="46" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>Facebook</a>
<a class="popular_button fill rounded" href="#">
<svg fill="none" height="46" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5 0-.278-.028-.556-.08-.83A7.72 7.72 0 0 0 23 3Z"></path>
</svg>Twitter</a>
<a class="popular_button fill rounded" href="#">
<svg fill="currentColor" height="46" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M5.788 14.02a.746.746 0 0 0 .132.031 456.056 456.056 0 0 1 .845 2.002c.502 1.202 1.008 2.44 1.12 2.796.139.438.285.736.445.94.083.104.178.196.29.266a.88.88 0 0 0 .186.088c.32.12.612.07.795.009a1.313 1.313 0 0 0 .304-.15L9.91 20l2.826-1.762 3.265 2.502c.048.037.1.068.156.093.392.17.772.23 1.13.182.356-.05.64-.199.85-.368a1.994 1.994 0 0 0 .564-.728l.009-.022.003-.008.002-.004v-.002l.001-.001a.748.748 0 0 0 .04-.133l2.98-15.025a.752.752 0 0 0 .014-.146c0-.44-.166-.859-.555-1.112-.334-.217-.705-.227-.94-.209-.252.02-.486.082-.643.132a3.451 3.451 0 0 0-.26.094l-.011.005-16.714 6.556-.002.001a2.296 2.296 0 0 0-.167.069 2.522 2.522 0 0 0-.38.212c-.227.155-.75.581-.661 1.285.07.56.454.905.689 1.071.128.091.25.156.34.199.04.02.126.054.164.07l.009.003 3.169 1.067Zm14.138-9.152h-.002a.78.78 0 0 1-.026.011L3.164 11.444a.818.818 0 0 1-.026.01l-.01.003a1.126 1.126 0 0 0-.09.04.854.854 0 0 0 .086.043l3.142 1.058a.75.75 0 0 1 .16.076l10.377-6.075.01-.005a2.012 2.012 0 0 1 .124-.068 2.05 2.05 0 0 1 .317-.131c.09-.028.357-.107.645-.014a.854.854 0 0 1 .588.689.84.84 0 0 1 .003.424c-.07.275-.262.489-.438.653-.15.14-2.095 2.016-4.014 3.868l-2.613 2.52-.465.45 5.872 4.502a.536.536 0 0 0 .251.04.229.229 0 0 0 .117-.052.495.495 0 0 0 .104-.12v-.001l2.891-14.573a1.858 1.858 0 0 0-.267.086h-.002Zm-8.461 12.394-1.172-.898-.284 1.805 1.456-.907Zm-2.246-2.68 1.165-1.125 2.612-2.522.973-.938-6.52 3.817.035.082a339.2 339.2 0 0 1 1.22 2.92l.283-1.8a.747.747 0 0 1 .232-.435Z" fill-rule="evenodd"></path>
</svg>Telegram</a>
<a class="popular_button fill rounded" href="#">
<svg fill="none" height="46" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="46" xmlns="http://www.w3.org/2000/svg">
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
<path d="m9.75 15.02 5.75-3.27-5.75-3.27v6.54z"></path>
</svg>Youtube</a>
What is the Button ?
A button is a graphical user interface (GUI) element commonly used in software applications, websites, and other interactive systems. It is designed to be clicked or tapped by the user, typically with a mouse or touchscreen, to trigger an action or perform a specific function. Buttons are visually identifiable through their appearance, often appearing as a labeled rectangular or rounded shape with a border and sometimes an icon or image representing its purpose. The label on the button usually indicates the action it will perform when activated, such as "Submit," "Save," "Cancel," "OK," "Close," or any other action relevant to the context.
When a user interacts with a button, either by clicking it with a mouse or tapping it on a touchscreen, the button usually responds visually, giving feedback to the user that the action has been recognized. This visual feedback often includes changing the button's appearance, such as changing its color or adding a temporary visual effect (e.g., a shadow or animation) to indicate the activation.
Buttons serve various purposes in user interfaces, including:1. Triggering actions: Buttons can execute tasks like submitting a form, confirming a choice, starting a process, or performing an action within an application.
2. Navigation: In web design and applications, buttons can be used as navigation elements to link to different pages or sections of the website.
3. Dialog box interaction: Buttons can be part of dialog boxes, prompting the user to choose an option, such as "OK" or "Cancel."
4. Interaction with multimedia: In media players or video games, buttons enable users to play, pause, stop, or skip media content.
5. Form controls: Buttons can be used in forms for actions like resetting form fields or adding dynamic elements.
Buttons are essential components of user interfaces, providing a clear and intuitive way for users to interact with software and digital environments. Their design and placement are crucial for creating a user-friendly and engaging experience.
If you want to report some bugs, you can write it in the comment section of the Report a bug page and if you want to request a new feature or give feedback, please write it in the comment section of the request and feedback page.
Post a Comment
Post a Comment