Edit in JSFiddle

<div class="circle">
    <span>Stop</span>
</div>
<div id="content">
    <h1>Go around the World</h1>
    <p class="top">"I am sorry to have nothing better to offer you," said Mr. Fogg to Fix, who bowed without responding.</p>
    <br />
    <p>The detective had a feeling akin to humiliation in profiting by the kindness of Mr. Fogg.</p>
    <br />
    <p>"It's certain," thought he, "though rascal as he is, he is a polite one!"</p>
    <br />
    <p>The sails and the English flag were hoisted at ten minutes past three. Mr.     Fogg and Aouda, who were seated on deck.</p>  
</div>

@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);

body {
    background: #C8CCCA;
}

.circle {
    position: relative;
    border-radius: 100%;
    background: #F5254E;
    border: 10px solid #C8CCCA;
    width: 80px;
    height: 80px;
    margin: 20px auto;
    text-align: center;
    color: #FFF;
    font: normal 1em/80px Droid Sans Mono, Calibri;
    cursor: pointer;

}

.circle::before, .circle::after {
    content: "";
    position: absolute;
    left: -200px;
    top: 50%;
    height: 1px;
    width: 180px;
    border-bottom: 1px dashed #BB9F95;
}

.circle::after {
    left: auto;
    right: -200px;
}

.circle:hover {
    border-color: #626266;
    transition-property: border;
    transition-duration: 3s ;
    -webkit-transition-property: border;
    -webkit-transition-duration: 3s ;
    -moz-transition-property: border;
    -moz-transition-duration: 3s;
    -o-transition-property: border;
    -o-transition-duration: 3s ;   
}


#content {
margin: 0 auto;
width: 50%;  

}

h1 {
font: normal 24px/28px Droid Sans Mono;
display:inline;

}

p.top{
margin-top:20px;

}

p,
h1 {
    color: rgb(80,80,80);
    width:100%;
} 

p  {
    
    font: normal 10px/18px Droid Sans Mono;
}

span {
    font: normal 15px/0px Droid Sans Mono;
}