Hacks for Life: How to create a clickable button which wraps text and resizes with changes in screen width.

Sunday, January 31, 2016

How to create a clickable button which wraps text and resizes with changes in screen width.

This is the code:

  
<!--Head tags contain width detection-->
<head>
<meta name="viewport" content="width=device-width, user-scalable=false; initial-scale=1.0; maximum-scale=1.0">
</head>

<!--Body tags contain button-->
<body>

<!--first the a tag, then div-->
<!--display:inline-block shrinks the div around the text-->
<a href="http://google.com" style="text-decoration: none;">
  <div class="button" style="margin: 0 0 0 30px;display:inline-block;">CLICK HERE!</div>
</a>

<!--button style details-->
<style>
.button {
 margin:auto;
 -webkit-border-radius: 30px 30px 30px 30px;
 border-radius: 30px 30px 30px 30px;
 background: #F2AE60; /* Old browsers */
 background: -moz-linear-gradient(top,  #F2AE60 0%, #F79618 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2AE60), color-stop(100%,#F79618)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #F2AE60 0%,#F79618 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #F2AE60 0%,#F79618 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #F2AE60 0%,#F79618 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #F2AE60 0%,#F79618 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F2AE60', endColorstr='#F79618',GradientType=0 ); /* IE6-9 */
 padding:10px 20px 10px 20px;
 text-align:center;
}
.button {
 text-align:center;
 font-family:Arial, Helvetica, sans-serif;
 font-size:24px;
 font-weight:bold;
 color:#fff;
 text-decoration:none;
}
.button:hover {
 background: #F79618; /* Old browsers */
 background: -moz-linear-gradient(top,  #F79618 0%, #F2AE60 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F79618), color-stop(100%,#F2AE60)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #F79618 0%,#F2AE60 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #F79618 0%,#F2AE60 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #F79618 0%,#F2AE60 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #F79618 0%,#F2AE60 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F79618', endColorstr='#F2AE60',GradientType=0 ); /* IE6-9 */
}
</style>
</body>

The button below is the end result. To see the width changing in action, copy and paste the above code into a new html file then run the file (it doesn't work while on blogger.com.

CLICK HERE!

Hacks for Life

Sunday, January 31, 2016

How to create a clickable button which wraps text and resizes with changes in screen width.

No comments:

Post a Comment

Popular Posts