How to Create Blog Link Buttons?

Adsense publishes link ads on blogs and websites in the form of a button. In addition, these link ads adapt to the background color, providing integrity as if they were part of the site.

In order for Adsense ads and blog design to be in a better harmony and form integrity, in this article I will explain how to create blog link buttons that will adapt to Adsense link ads by using CSS and HTML codes, and you can use them by adding different colors to the link buttons.

How to Create Blog Link Buttons?

Add the following CSS codes one line above your blog's ]]></b:skin> or </style> and save the template.

.link-button{font-weight:normal;font-size:16px;color:#fff;width:100%;max-width:350px;height:90%;margin:10px auto;text-align:center;display:block;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:41px;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;border:1px solid #fff;border-radius:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-shadow:0 1px 1px rgba(255,255,255,0.35) inset,0px 1px 1px rgba(0,0,0,0.3)}
.link-black{background:#333}
.link-red{background:#f44336}
.link-pink{background:#e91e63}
.link-purple{background:#9c27b0}
.link-deep-purple{background:#673ab7}
.link-indigo{background:#3f51b5}
.link-blue{background:#2196f3}
.link-light-blue{background:#03a9f4}
.link-cyan{background:#00bcd4}
.link-teal{background:#009688}
.link-green{background:#4caf50}
.link-light-green{background:#8bc34a}
.link-lime{background:#cddc39}
.link-yellow{background:#ffeb3b}
.link-amber{background:#ffc107}
.link-orange{background:#ff9800}
.link-deep-orange{background:#ff5722}
.link-brown{background:#795548}
.link-grey{background:#9e9e9e}
.link-blue-grey{background:#607d8b}
.link-white{background:#fff;color:#222}
.link-button:hover{background:#fff;color:#222}

Among the above CSS codes, there is a different color code for each button. You can create different buttons by adding different color codes to these color codes or by changing the existing color code.

You can use the following HTML codes in blog pages, posts or menus. Each HTML code creates a different button.

<a class="link-button link-red" href="#" target="_blank">Link Button</a>
<a class="link-button link-pink" href="#" target="_blank">Link Button</a>
<a class="link-button link-purple" href="#" target="_blank">Link Button</a>
<a class="link-button link-deep-purple" href="#" target="_blank">Link Button</a>
<a class="link-button link-indigo" href="#" target="_blank">Link Button</a>
<a class="link-button link-blue" href="#" target="_blank">Link Button</a>
<a class="link-button link-light-blue" href="#" target="_blank">Link Button</a>
<a class="link-button link-cyan" href="#" target="_blank">Link Button</a>
<a class="link-button link-teal" href="#" target="_blank">Link Button</a>
<a class="link-button link-green" href="#" target="_blank">Link Button</a>
<a class="link-button link-light-green" href="#" target="_blank">Link Button</a>
<a class="link-button link-lime" href="#" target="_blank">Link Button</a>
<a class="link-button link-yellow" href="#" target="_blank">Link Button</a>
<a class="link-button link-amber" href="#" target="_blank">Link Button</a>
<a class="link-button link-orange" href="#" target="_blank">Link Button</a>
<a class="link-button link-deep-orange" href="#" target="_blank">Link Button</a>
<a class="link-button link-brown" href="#" target="_blank">Link Button</a>
<a class="link-button link-grey" href="#" target="_blank">Link Button</a>
<a class="link-button link-blue-grey" href="#" target="_blank">Link Button</a>
<a class="link-button link-white" href="#" target="_blank">Link Button</a>
<a class="link-button link-black" href="#" target="_blank">Link Button</a>

We mentioned above that there is a different CSS code for each link button. As can be seen in the sample codes below, there are CSS and HTML codes for the black link button. You can get more different (colored) buttons by changing the places specified in the sample codes. If you create a new button, you need to add the CSS code of the button between the above CSS codes.

Sample CSS code

.link-black{background:#333}

Sample HTML code

<a class="link-button link-black" href="#" target="_blank">Link Button</a>

Add your link instead of (#) specified in the sample HTML code above.

Conclusion

Link buttons, which are so simple to make and use, will also add a different aesthetic to your blog. You can report your opinions about the blog link buttons by using the comment form.