Hello-World.markdown

Hello World

A Pen by Farid Mokraoui on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<p>hello world</p>

<div class="button"></div>

style.scss

body{
  background: #222;
}

p {
  color: #333;
  font: 700 200px/1em Oswald, san-serif;
  letter-spacing: -8px;
  margin: 0;
  text-align: center;
  text-shadow: 0 5px 25px rgba(0,0,0,0.5), 0 2px 0 rgba(0,0,0,0.5), 0 -2px 0 rgba(255,255,255,0.25) ;
  text-transform: uppercase;
}

.button{
  background: rgba(255,0,0,.75);
  border-radius: 50%;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5), 0 2px 0 rgba(255,0,0,0.5), 0 -2px 0 rgba(255,255,255,0.25) ;
  height: 150px;
  margin: 85px auto;
  text-align: center;
  width: 150px;
  
  &:hover{
    background: rgba(255,0,0,1);
    box-shadow: 0 5px 25px rgba(255,0,0,0.5), 0 2px 0 rgba(255,255,255,0.25), 0 -2px 0 rgba(255,0,0,0.5) ;
  }

  &:before{
    border-radius: 50%;
    box-shadow: inset 0 0 25px rgba(0,0,0,.5), inset 0 2px 0 rgba(0,0,0,.5), inset 0 -2px 0 rgba(255,255,255,.25);
    content:'';
    display: inline-block;
    height: 200px;
    left:-25px;
    position: relative;
    top: -25px;
    width: 200px;
    z-index: -5;
  }
  
  &:after{
    color: rgba(255,255,255,0.85);
    content:'\f0e7';
    font: normal 85px/150px 'FontAwesome';
    position: relative;
    top: -200px;
  }
}