Hello. Below is code that takes an HTML anchor and styles it to look like a button.
Is it possible to use my CSS and style an HTML submit button to look and behave the same way?
<!DOCTYPE HTML>
<html lang="en">
<!-- ************************* HTML HEAD ********************************* -->
<head>
<!-- METADATA -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<!-- TITLE -->
<title>sp_button-example.html</title>
<!-- CSS STYLES -->
<style media="screen">
html, body{
margin: 0;
padding: 0;
}
body{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
line-height: 1.4em;
font-size: 0.9em;
}
#wrapper{
display: flex;
justify-content: center;
box-sizing: border-box;
max-width: 30em;
margin: 6em auto;
padding: 2em 0;
border: 1px solid #333;
}
.myButton{
display: inline-block;
margin: 0 0.5em 0 0;
padding: 0.2em 0.8em 0.1em 0.8em;
font-family: inherit;
font-size: 0.8rem;
font-weight: bold;
text-decoration: none;
color: #000; /**/
border: 1px solid #FFBB4D; /* Orange */
border-radius: 6px;
background: linear-gradient(to bottom, #FFEC64 50%, #FFBB4D); /* Gold to Orange */
cursor: pointer;
}
.myButton:hover{
background: linear-gradient(to bottom, #FFBB4D, #FFEC64 70%); /* Orange to Gold */
}
.myButton:active{
background-image: none; /* Can eliminate by using background: #FFBB4D; */
background-color: #FFBB4D; /* Orange */
}
</style>
</head>
<!-- ************************* HTML BODY ********************************* -->
<body>
<div id="wrapper">
<a href="" class="myButton">Link styled as a Button</a>
</div>
</body>
</html>
Of particular interest is re-using the linear-gradient and hover and active.
Thanks.