<html>
  
  <head>
    <title> Flat button</title>
    
  </head>
  
  <body>
    
    <p class="button"> 
      
      <a  href="#"> HOVER ME!  </a> 
      <a   href="#"><img width="35"               src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png" /> </a>   
    </p>
    <p>
    <hr>
    </p>
    
  </body>
  
</html>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300|Open+Sans+Condensed:300');

/* ----- Edit  here ---- ---------*/
a
{
  font-size : 28px;
  text-decoration : none;
  font-family : 'Open Sans Condensed', sans-serif;
  background-color: #4e4294;
  padding: 35px;
  color : white;
  -webkit-transition:all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0.80;
  
}

a:hover
{
  background-color: rgba(199, 33, 94, 0.97);
  box-shadow : 1px 1px 15px black;
   opacity: 1;
  
}
/*--------------End -----------------*/

.button
{
  
  margin-top: 200px;
  display: flex;
  justify-content: center;
 
}

html
{
  background-image : url("https://3hsyn13u3q9dhgyrg2qh3tin-wpengine.netdna-ssl.com/wp-content/uploads/2014/09/SplitShire_Blur_Background_XVI-1800x1200.jpg");
  background-size:100vh;
 

}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(255, 255, 255), rgba(0, 0, 0, 0));
}

img
{
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

img:hover
{
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.7);
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.