How to make bootstrap button transparent ?
Buttons can be made transparent in Bootstrap by using the built-in class property:
Syntax:
<button class="btn bg-transparent">
Transparent button
</button>
Description:
- The <button> tag is used to specify the button element in HTML, which gets executed on pressed.
- Generally, the properties of bootstrap must be mentioned in class. Example: class=” “
- Inside the class=” ”
btn – On mentioning the btn property, specifies that its a bootstrap button.
bg – Specifies the background color of the button.
transparent – Makes the button transparent.
How to use it:
Make sure, you have included the bootstrap code (Starter Template) in your code.
Example:
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 ,
shrink-to-fit = no ">
< link rel = "stylesheet"
href =
integrity =
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin = "anonymous" >
< title >Hello, world!</ title >
</ head >
< body >
< button class = "btn bg-transparent" >
Transparent button
</ button >
integrity =
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin = "anonymous" ></ script >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" ></ script >
< script src =
integrity =
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin = "anonymous" ></ script >
</ body >
</ html >
|
Output:
Before Pressing:
After pressing:
The documentation of Bootstrap is well-structured and easy to understand.
Reference: Official Documentation
Last Updated :
22 Apr, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...