We are online here 👉

Info Articles Automation

Amazon Review Article

Write Versus Article

Food Recipe Article

SaaS Review Article

Biography Article

Mobile Spcs Article

Automation (Advanced)

Upcomming Soon

Content Features
Generate Bulk Articles
Write Single Article
Article Heading Control
Custom Post Title Pattern
Plagiarism Free Ai Articles
Readable and Unique Articles
SEO Optimized AI Articles
Publish Post/page Type
Custom Slug Option
Add Focus Keywords
Add Entities Option
Add Negative Keywords
General Features
Add Image Source Credit
Control Images Quantity
Control Video Quantity
Turn Off/On Introduction
Turn Off/On Conclusion
Turn Off/On Quick Answer
Turn Off/On Key Takeaways
Turn Off/On FAQ
Writing Tone Support
Point Of View Support
Integration Features
GPT-4o Integration
GPT-4 Turbo Integration
AI Image Integration
Auto Post WordPress Site
Auto Post Shopify Site
Support Google CCL Image
Support Google Image
Support Pixabay Image
Support Unsplash Image
Support YouTube Video
Auto WP Post Schedule
Advanced Features
Custom Outline Support
Save Custom Prompt (Advanced)
Save Custom Template (Advanced)
Custom Information
External Linking
Automatic Infographics
Internal Linking
Campaign Management
Queue Management System
Generate AI Title
100+ Language Support
Post Status Control

AI Buster Custom CSS

Hello, if you want to give your article a very beautiful look, then use the following CSS on your website. It will work on all types of articles written with AI Buster.

How Do I Add This?

  • First, copy the CSS below.
.featured {
    padding: 20px;
    background: #DFF9ED;
    border-color: #b0edd2;
    border: 1px solid;
    border-radius: 6px;
    margin: 22px -3px 23px 0px;
    display: block;
}

/* keytakeways */
.keytakeways {    background-color: rgb(0 0 0 / 5%);
    margin-top: 30px;
	  padding: 20px;
    border-radius: 6px;
	  margin-bottom: 30px;
}

/*Table Code*/

table {
width: 100%;
border-collapse: collapse
}

table, td, th {
border: 0;
}

table td:first-child {
    font-weight: 600;
    background-color: rgb(0 0 50 / 3%);
}

/* Zebra striping */
tr:nth-of-type(odd) { 
	background-color: rgba(0,0,50,.02);
	}

th { 
	background: #3498db; 
	color: white; 
	font-weight: bold; 
	}

td, th { 
	padding: 10px; 
	border: 1px solid rgba(34,36,38,.15); 
	text-align: left; 
	}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	table { 
	  	width: 100%; 
	}

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}

	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		/* Label the data */
		content: attr(data-column);

		color: #000;
		font-weight: bold;
	}

}


$color: #0cf;

.button {
	display: inline-block;
	padding: .75rem 1.25rem;
	border-radius: 10rem;
	color: #fff;
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: .15rem;
	transition: all .3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: $color;
		border-radius: 10rem;
		z-index: -2;
	}
	&:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0%;
		height: 100%;
		background-color: darken($color, 15%);
		transition: all .3s;
		border-radius: 10rem;
		z-index: -1;
	}
	&:hover {
		color: #fff;
		&:before {
			width: 100%;
		}
	}
}

/* img, Button Center */
.single-post a.button {
    position: relative;
    transform: translateX(-50%);
    left: 50%;
	white-space: nowrap !important;
	padding: 20px 40px;
    line-height: 1;
}

.single-post img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
	    margin-top: 40px;
}







/* CSS */
.hotellink {
  appearance: none;
  backface-visibility: hidden;
  background-color: #2f80ed;
  border-radius: 10px;
  border-style: none;
  box-shadow: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size: 15px;
  font-weight: 500;
  height: 50px;
  letter-spacing: normal;
  line-height: 1.5;
  outline: none;
  overflow: hidden;
  padding: 14px 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.hotellink:hover {
  background-color: #1366d6;
  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
  opacity: 1;
  transform: translateY(0);
  transition-duration: .35s;
}

.hotellink:hover:after {
  opacity: .5;
}

.hotellink:active {
  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
  transform: translateY(2px);
  transition-duration: .35s;
}

.hotellink:active:after {
  opacity: 1;
}

.hotellink {
    padding: 14px 22px;
    width: 190px;
}

.hotellink a {
    color: #fff;
    text-decoration: none;
}

.alternative {
    background: aliceblue;
    padding: 20px;
}
.importantalert1 {
     padding: 8px 16px;
    margin-bottom: 1.5em;
    background-color: #fffebc;
    border: 1px solid #dddc6d;
	  font-weight:600;
}
.importantalert2 {
    padding: 8px 16px;
    margin-bottom: 1.5em;
    background-color: #fffebc;
    border: 1px solid #dddc6d;
	 font-weight:600;
}

.importantalert3 {
    padding: 8px 16px;
    margin-bottom: 1.5em;
    background-color: #fffebc;
    border: 1px solid #dddc6d;
	 font-weight:600;
}

@media (min-width: 768px) {
  .hotellink {
    padding: 14px 22px;
    width: 190px;
		margin-top: 20px;
		
  }
}
  • Go to ‘customize‘ from your website.
aibuster
  • Click on ‘Additional CSS‘.
Additional CSS
  • Paste the entire copied CSS into the ‘Additional CSS’ box.”
Additional CSS

Now enjoy

Join our AI experts community

Meet and learn from 10k+ creators & companies who share how they use AI to create better content at lightning speed.

Scroll to Top