How do I skip the button?
I'm wondering if anyone here can help? I want to have a button with two words: "Icelandic" at the top and "Toys below".
But I haven't figured out how to do it.
<p><a href="Icl-Toys.htm" class='button' >Icelandic Toys</a></p><br>
My Css:
.button {
border: 2px solid #0a3c59;
background: #f7f9fa;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f9fa));
background: -webkit-linear-gradient(top, #ffffff, #f7f9fa);
background: -moz-linear-gradient(top, #ffffff, #f7f9fa);
background: -ms-linear-gradient(top, #ffffff, #f7f9fa);
background: -o-linear-gradient(top, #ffffff, #f7f9fa);
background-image: -ms-linear-gradient(top, #ffffff 0%, #f7f9fa 100%);
padding: 11.5px 23px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #06426c;
font-size: 15px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
source to share
You can move the borders in P and set it to a fixed width and it will break more gracefully.
No additional markup or positioning is required.
.button {
color: #06426c;
font-size: 15px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
p {
width: 50px;
text-align: center;
border: 2px solid #0a3c59;
background: #f7f9fa;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f9fa));
background: -webkit-linear-gradient(top, #ffffff, #f7f9fa);
background: -moz-linear-gradient(top, #ffffff, #f7f9fa);
background: -ms-linear-gradient(top, #ffffff, #f7f9fa);
background: -o-linear-gradient(top, #ffffff, #f7f9fa);
background-image: -ms-linear-gradient(top, #ffffff 0%, #f7f9fa 100%);
padding: 11.5px 23px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #7ea4bd 0 1px 0;
}
demo: http://jsfiddle.net/k2oostzq/2/
Option 2
If you don't want to use fixed width buttons, or if they are dynamic, you can use a tag <br>
with this code and swap the p inline-block.
html added br:
<p><a href="Icl-Toys.htm" class='button'>Icelandic<br>Toys</a></p>
CSS
.button {
color: #06426c;
font-size: 15px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
p {
display: inline-block;
text-align: center;
border: 2px solid #0a3c59;
background: #f7f9fa;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f9fa));
background: -webkit-linear-gradient(top, #ffffff, #f7f9fa);
background: -moz-linear-gradient(top, #ffffff, #f7f9fa);
background: -ms-linear-gradient(top, #ffffff, #f7f9fa);
background: -o-linear-gradient(top, #ffffff, #f7f9fa);
background-image: -ms-linear-gradient(top, #ffffff 0%, #f7f9fa 100%);
padding: 11.5px 23px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #7ea4bd 0 1px 0;
}
source to share
Hope this is what you need. Try to run the code snippet to see the result
p{
width:2px;
}
<p><a href="Icl-Toys.htm" class='button' >Icelandic Toys</a></p><br>
source to share
you can also put it in a div like so: http://jsfiddle.net/swm53ran/32/
(this way you don't have to mess with word pixels or whatever.
<div class="button1">
<a href="Icl-Toys.htm" class='' >Icelandic<br/>Toys</a>
</div>
.button1 a {
text-decoration:none;
}
.button1 {
display:inline-block;
text-align:center;
...the rest of your code
}
source to share
You can use display: table-caption;
to achieve this effect.
.button {
border: 2px solid #0a3c59;
background: #f7f9fa;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f9fa));
background: -webkit-linear-gradient(top, #ffffff, #f7f9fa);
background: -moz-linear-gradient(top, #ffffff, #f7f9fa);
background: -ms-linear-gradient(top, #ffffff, #f7f9fa);
background: -o-linear-gradient(top, #ffffff, #f7f9fa);
background-image: -ms-linear-gradient(top, #ffffff 0%, #f7f9fa 100%);
padding: 11.5px 23px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #06426c;
font-size: 15px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
/* New Style */
display: table-caption;
text-align: center;
}
<p>
<a href="#" class='button'>Icelandic Toys</a>
</p>
<br>
source to share