CSS in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

CSS3 links in web studio

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

Applying CSS3 to web studio text links

CSS3 LINK STYLES & WEB STUDIO
All these use CSS3, (except the first one box links) so there is a lot we can do with them.
We'll apply them to the link using internal css with a class so you can use them as many times as you want.
The problem is the older IE browsers IE10 is okay and all normal browsers firefox, chrome, safari, opera etc. are fine
but since Web studio preview uses IE in "quirks mode" you'll need to
preview them in a normal browser

You put your text on the page and add your link like you always do

Copy/paste the class to "anchor tag" like this

Select your text and on the
 TEXT tab in "Clipboard"
select "edit HTML" put the class
in the link like this:

On the "Html tab"
in "Insert Page HTML" Copy/Paste
the code in the
HEAD

Copy/paste the code to "Inside HEAD" like this

Preview in a normal browser (or up to date IE9+ browser) to see it working

<P>
<A class=yourclass href="yourlink.html">your link</A>
</P>

between the A and the href

Box style links

I use these links all the time since they use css not css3 so you can
preview them inside web studio and in the old out of date IE browsers

Both of these examples use only black & white.
You can play around with the colors using
either color names or hex colors.
There is a lot more on link coding on
the "styling links" page.

class=wsbox

between the A and the href

in the HEAD

<style type="text/css">
a.wsbox:link,a.wsbox:visited{display:block; width:100%; text-align:center; padding:1px; text-decoration:none;
color: white;
background: black;
border:1px solid white;}
a.wsbox:hover,a.wsbox:active{
color: black;
background: white;
border:1px solid black;}
</style>

You can make the text object (box)
any width you like using web studio

When you preview this one in
web studio you only see the square corners.
You can adjust the radius by
changing 10px to 6px for example

class=wsbox2

between the A and the href

in the HEAD

<style type="text/css">
a.wsbox2:link,a.wsbox2:visited{display:block; width:100%; text-align:center; padding:1px; text-decoration:none;
color: white;
background: black;
border:1px solid white;
border-radius: 10px;}
a.wsbox2:hover,a.wsbox2:active{
color: black;
background: white;
border:1px solid black;}
</style>

With css3 you can round the corners by adding
border-radius: 10px;

Transition Delay

Now we're into newer css3 but still these will degrade well so they won't be a problem for the old IE browsers
they do catch up with IE10 though for transitions so it won't be too long.
You'll need to preview them in a normal browser like firefox chrome or safari.

If you have an old browser you won't
see the neat transition effect.
ease-out and ease-in make it a bit smoother
.5s is the timing in seconds
so .5s is a half a second 1.0 would be
a full second for example

class=wsdelaybox

between the A and the href

in the HEAD

<style type="text/css">
a.wsdelaybox:link,a.wsdelaybox:visited{display:block; width:100%; text-align:center; padding:1px; text-decoration:none;
color: white;
background: black;
border:1px solid white;
transition: color .5s ease-out, background .5s ease-in;
-webkit-transition: color .5s ease-out, background .5s ease-in;
}
a.wsdelaybox:hover,a.wsdelaybox:active{
color: black;
background: white;
border:1px solid black;}
</style>

We are using the same old
box as above but adding some css3

Transition with Padding

We are using a half a second transition
transition: .5s;
and changing the left padding (space) from
padding: 1px 0px 1px 0px; to
padding: 1px 0px 1px 30px;
So leave a liitle room to the right of
your link in web studio

class=wswidenbox

between the A and the href

in the HEAD

<style type="text/css">
a.wswidenbox:link,a.wswidenbox:visited {display:block; width:100%; text-align:center; text-decoration:none;
padding:1px 0px 1px 0px;
color:white;
background:black;
border:1px solid white;
transition: .5s;
-webkit-transition: .5s;
}
a.wswidenbox:hover,a.wswidenbox:active {
background:dimgray;
color:white;
border:1px solid #ffbf28;
padding:1px 0px 1px 30px;}
</style>

This time we'll change the padding
with a transition

Transition with Background Slide

We are using transitions
transition: .7s;
and this time box-shadows so it's a bit tricky
but I wanted to show you the css3
These show only the border change
in the older IE so you don't see the gold.
But we can do this without jQuery
and javascrpt.

class=wsbackslidebox

between the A and the href

in the HEAD

<style type="text/css">
a.wsbackslidebox:link,a.wsbackslidebox:visited{display:block; width:100%; text-align:center; padding:1px 0px 1px 0px;
text-decoration:none;
color:white;
background:black;
border:1px solid white;
transition: .7s;
-webkit-transition: .7s;
box-shadow: inset 0 100px 0 0 #CC9920;
}
a.wsbackslidebox:hover,a.wsbackslidebox:active{
color:white;
border:1px solid #ffbf28;
box-shadow: inset 0 0 0 0 #CC9920; }
</style>

This time we'll change the background
with a transition and box-shadow

Transition with Text Glow

We are using transitions
transition: .5s;
and a text-shadow with
a blur of 14px and a
white shadow

class=wstextglow

between the A and the href

in the HEAD

<style type="text/css">
a.wstextglow:link,a.wstextglow:visited{
text-align:center; text-decoration:underline; padding:1px 0px 1px 0px;
color:dimgray;
transition: .5s;-webkit-transition: .5s;
}
a.wstextglow:hover,a.wstextglow:active{
color:white;
text-shadow: 0px 0px 14px white;}
</style>

This time we'll just use some text
with a transition and text-shadow

Best for last, a Transition with Text Shadow for a 3d effect

We are using transitions
transition: .5s;
and two text-shadow
looks neat huh?
Even better when the text is larger.

class=ws3dtext

between the A and the href

in the HEAD

<style type="text/css">
a.ws3dtext:link,a.ws3dtext:visited{
text-align:center; text-decoration:underline; padding:1px 0px 1px 0px;
color:dimgray;
transition: .5s;-webkit-transition: .5s;
}
a.ws3dtext:hover,a.ws3dtext:active{
color:white;
text-shadow: 2px 2px 0px black, 1px 10px 6px black;}
</style>

Thank-you

CSS in Web Studio 5 - How to make CSS3 links - by Web Studio Next

aaaaaaaaaaaaiii