Cheesetoast » gradient http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.10 Lined Paper with CSS http://www.cheesetoast.co.uk/css-lined-paper/ http://www.cheesetoast.co.uk/css-lined-paper/#comments Thu, 11 Apr 2013 23:06:37 +0000 http://www.cheesetoast.co.uk/?p=1140 Continuing on from my previous article on a CSS paper stack, I found a way to take the paper theme a little further with lined paper. Basically we use a repeat CSS3 gradient to create the lines on the page. Read … Continue reading

The post Lined Paper with CSS appeared first on Cheesetoast.

]]>
Lined PaperContinuing on from my previous article on a CSS paper stack, I found a way to take the paper theme a little further with lined paper.

Basically we use a repeat CSS3 gradient to create the lines on the page. Read more about CSS gradients and stop colours from Dynamicdrive.

View the demo on codepen. Here’s the code:

.page {

/* Setup the basic presentation of the div */
font-family: 'Just Another Hand', cursive;
width: 700px;
position: relative;
margin: auto;
padding: 15px 0;
color: #212121;

/* Curl the corners to make it look more like paper */
-webkit-border-bottom-left-radius: 20px 500px;
-webkit-border-bottom-right-radius: 500px 30px;
-webkit-border-top-right-radius: 5px 100px;

-moz-border-radius-bottomleft: 20px 500px;
-moz-border-radius-bottomright: 500px 30px;
-moz-border-radius-topright: 5px 100px;

border-radius-bottomleft: 20px 500px;
border-radius-bottomright: 500px 30px;
border-radius-topright: 5px 100px;

/* Set the background */
background: white;
background:
-webkit-gradient(
linear,
left top, left bottom,
from(#333),
color-stop(2%, white)
);

background:
-moz-repeating-linear-gradient(
top,
#fff,
#fff 38px,
#81cbbc 40px
);

background:
repeating-linear-gradient(
top,
#fff,
#fff 38px,
#81cbbc 40px
);

-webkit-background-size: 100% 40px;

-webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);

}
p {
padding: 0 100px;
line-height: 40px;
margin-bottom: 40px;
font-size: 30px;
}

Original article on NetTuts.

The post Lined Paper with CSS appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-lined-paper/feed/ 0
Pure CSS Call To Action Button http://www.cheesetoast.co.uk/css-call-action-button/ http://www.cheesetoast.co.uk/css-call-action-button/#comments Mon, 06 Aug 2012 19:36:29 +0000 http://www.cheesetoast.co.uk/?p=584 Use pure CSS to create an eye catching "call to action" button. The styling combines rounded corners, gradient background, box shadows, and transition animation for a hover effect. Continue reading

The post Pure CSS Call To Action Button appeared first on Cheesetoast.

]]>
"Click This" buttonI’m going to demonstrate how to use CSS to create an eye catching “call to action” button.

First of all we create a basic HTML button:

<a class="call-to-action" href="#">CLICK THIS!</a>

Button - First RoundNext we add the CSS to give the button some padding and add a rounded border. We also get rid of the default color and the underline that comes with anchor links.

a.call-to-action {
color: rgb(30, 142, 30);
font-weight: bold; 
width: 200px;
padding: 10px 20px;
font-family: arial, sans-serif;
font-size: 25px;
text-decoration: none;
border: 1px solid #C3C3B7;
border-radius: 8px;
...
}

Button - Second RoundNext we’ll add a gradient background to make it look more appealing.

Choose the colour of the button carefully. Different colours have different effects. Try reading this article on Call to Action Buttons and the Psychology of Color for more info.

I used the CSS gradient generator at Colorzilla to get the following code. It’s a lot quicker than coding it by hand and you get to preview it first.

background: #f2f2e7;	/* old browsers */	
background: -moz-linear-gradient(top,  #f2f2e7 0%, #c3c3b7 100%);	/* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2e7), color-stop(100%,#c3c3b7));	/* chrome,safari4+ */ 
background: -webkit-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* chrome10+,safari5.1+ */ 
background: -o-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* opera 11.10+ */ 
background: -ms-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%); /* ie10+ */ 
background: linear-gradient(to bottom,  #f2f2e7 0%,#c3c3b7 100%); /* w3c */ 
filter: progid; /* ie6-9 */

"Click This" buttonLet’s not forget some box shadow to give our button some depth. We’ll give it two box shadows, one of which will be inset:

-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;

Finally we’ll add a subtle CSS3 transition animation for when the user hovers over the button. Add this to the class:

-webkit-transition: box-shadow 0.3s linear; 
-khtml-transition: box-shadow 0.3s linear; 
-moz-transition: box-shadow 0.3s linear;  
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;

Now we create the hover state:

a.call-to-action:hover {
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.9) 0px 5px 20px, inset rgba(0,0,0,0.15) 0px -10px 10px;
}

Here’s the whole thing:

a.call-to-action {
color: rgb(30, 142, 30);
font-weight: bold; 
width: 200px;
padding: 10px 20px;
font-family: arial, sans-serif;
font-size: 25px;
text-decoration: none;
border: 1px solid #C3C3B7;
border-radius: 8px;

/* Background gradient */
background: #f2f2e7;	/* old browsers */	
background: -moz-linear-gradient(top,  #f2f2e7 0%, #c3c3b7 100%);	/* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2e7), color-stop(100%,#c3c3b7));	/* chrome,safari4+ */ 
background: -webkit-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* chrome10+,safari5.1+ */ 
background: -o-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* opera 11.10+ */ 
background: -ms-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%); /* ie10+ */ 
background: linear-gradient(to bottom,  #f2f2e7 0%,#c3c3b7 100%); /* w3c */ 
filter: progid; /* ie6-9 */

/* Box shadow */
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;

/* CSS Transition Anitmation */
-webkit-transition: box-shadow 0.3s linear; 
-khtml-transition: box-shadow 0.3s linear; 
-moz-transition: box-shadow 0.3s linear;  
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}

a.call-to-action:hover {
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.9) 0px 5px 20px, inset rgba(0,0,0,0.15) 0px -10px 10px;
}

Here is the working example:

HOVER OVER ME

I hope this tutorial has been of some use. Please let me know if you have any suggestions on how this can be modified/improved.

Here are some other examples I made of CSS call to action buttons on codepen.

The post Pure CSS Call To Action Button appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-call-action-button/feed/ 2