Simple markup codes

this material is made for demo purpose & compatible with MyFreeCams

Simple, basic HTML clickable image (micro-banner or button)

It will render this banner

Styled link. No images used

HTML markup
<a class="btn" href="https://camgirl.cloud/" target="_blank">Button Name</a>

CSS markup
a.btn{padding:6px 22px;background-color:#09F;color:#f1f1f1;text-decoration:none;text-align:center;} .btn:hover{background-color:#F69;color:#fff;}

It will render this

Button Name

A bit more complex button

HTML markup
<a class="btn2" href="https://camgirl.cloud/" target="_blank">Button Name</a>

CSS markup
a.btn2{padding:6px 22px;background-color:#09F;color:#f1f1f1;text-decoration:none;text-align:center;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px #999;box-shadow:0 1px 3px #999;} .btn2:hover{background-color:#F69;color:#fff;-webkit-box-shadow:0 0px 3px #f1f1f1;box-shadow:0 0px 3px #f1f1f1;}

It will render this

Button Name

Example using CSS reflect effect

Using CSS reflect effect to spice up image rendering

HTML markup
<a class="reflect" href="https://camgirl.cloud/banners/"><img src="https://raw.githubusercontent.com/cssmfc/camgirl/master/hders_banners/image_editing.gif"/></a>
The reflect class is added to parent element which in this case is the link

CSS markup
.reflect img{-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));-webkit-border-radius:5px;border-radius:5px;}

Example using CSS ripple effect

Button Name

Using CSS ripple effect to spice up image rendering

HTML markup
<a class="ripple btn2" href="https://camgirl.cloud/banners/">Button Name</a>
The ripple class is added to parent element which in this case is the link

CSS markup
.ripple{position:relative;overflow:hidden;transform:translate3d(0,0,0)}.ripple:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s}.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s}

Info

URL/LINK. Replace the url between double quotes with your related link (url) --- after <a href="

IMAGE. Replace the url between double quotes with your related link of your hosted image. The image must be oploaded online --- after <img src="

To use more complex markup for showing buttons as showed above, both the CSS and the HTML codes must be installed on your MFC

It's obvious that you will need to add your own link instead of the default one

You may be interested in how to install a custom MyFreeCams profile design

Camgirl.Cloud

Camgirl Live Editor is a professional tool which allow customization and editing of a wide range of templates from pre designed gallery without writing a single line of code.

Online

Follow on Twitter

Join Facebook Group

Support forum

material by Dan N