<html>
<head>
<style>
body {
  background-color:lightblue;
}
.flower {
  display:block;
  width:100px;
  height:100px;
  background:pink;
  -moz-border-radius:25px;
  -webkit-border-radius:25px;
  border-radius:25px;
  radius:30px;
  position:relative;
  top: 100px;
}
.flower2 {
  display:block;
  width:100px;
  height:100px;
  background-color: pink;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(red), to(pink));
  background: -moz-radial-gradient(50% 50%, farthest-side,red,pink);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  rotation:45deg;
  -moz-border-radius:25px;
  -webkit-border-radius:25px;
  border-radius:25px;
}
.circle {
  width:50px;
  height:50px;
  background:yellow;
  -moz-box-shadow: inset 0 0 5px 5px orange;
  -webkit-box-shadow: inset 0 0 5px 5px orange;
  box-shadow: inset 0 0 5px 5px orange;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
  z-index:2;
  position:relative;
  top: 25px;
}
</style>
</head>
<body>
<center>
<form>
<div class="flower">
<span class="flower2">
<p class="circle">
</p>
</span>
</div>
</form>
</center>
</body>
</html>