CODEWITHSUNDEEP
css
Adam Klein
Adam Klein

Reputation: 11

how to add text when i hover over a button

I am brand new to CSS and only know very basic things. I found this code on the interwebs and it works to create a button but I will be using an image inside the button and when hovered I will have a color over the image and want to display text, how do I get it to say LEARN MORE once it is hovered? one more thing. how do I change the color when hovered? is there a way to change it using html color codes instead of the rgba? I have no idea how to use the rgba and want the color to change to #f58020 thanks and hopefully that makes sense 

.circle {
  display:block;
  text-decoration:none;
  border-radius:100%;
  background:#12809b;
  width:100px;
  height: 100px;
  color:#fff;
  text-align:center;
  font:bold 16px/100px Arial, sans-serif;
  text-transform:uppercase;
  transition: all 0.4s ease-in-out;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover {
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.5);
}

Upvotes: 1

Views: 6784

Answers (5)

Ricardo Castañeda
Ricardo Castañeda

Reputation: 5812

You don't need to add non semantic html elements. Add those styles to your code to get the hidden text:

.circle {color: transparent}
.circle:hover {color: white}

<a class="circle">Learn<br>More</a>

Then, add a padding top to .circle, reduce height and change line-height:

.circle {height: 65px; padding-top: 35px; font:bold 16px/100% Arial, sans-serif;}

See example: jsfiddle

In your css reference you have:

.circle {font:bold 16px/100px Arial, sans-serif;}

The 100px refers to line-height, 100px is a lot. I suggest you to use 100% percentage for this case.
The <br> is for forcing a line break. You can remove if you want, but then you'll have to add more padding top, and reduce height.

Upvotes: 1

David Raj
David Raj

Reputation: 11

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

  a.hovertext {
    position: relative;
    width: 500px;
    text-decoration: none !important;
    text-align: center;
  }
  a.hovertext:after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.5em 20px;
    width: 460px;
    background: rgba(0,0,0,0.8);
    text-decoration: none !important;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
  }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }

</style>
</head>
<body>



<p><a class="hovertext" href="#" title="LEARN MORE"><img id="a" src="buttonImage.png" width="500" height="309" border="0" alt=""></a></p>

</body>
</html>

Upvotes: 0

Prashant
Prashant

Reputation: 704

please watch this link DEMO

HTML

<button class="circle" ><span>new</span></button>

CSS

span{
    display: none;
}
.circle {
  display:block;
  text-decoration:none;
  border-radius:100%;
  background:#12809b;
  width:100px;
  height: 100px;
  color:#fff;
  text-align:center;
  font:bold 16px/100px Arial, sans-serif;
  text-transform:uppercase;
  transition: all 0.4s ease-in-out;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover{
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.5);
}
.circle:hover span{
  display: block;
}

Upvotes: 2

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

use

MARK UP

<div class="circle"><span>Learn</span></div>

or

<button class="circle"><span>Learn</span></button>

CSS

span{
  display: none;

}
.circle:hover span{

    display:block;
}

FIDDLE DEMO

Upvotes: 1

Talha Habib
Talha Habib

Reputation: 332

you can use hover property to display content before or after

<!DOCTYPE html>
<html>
<head>
<style>
p:before 
{
content:"Read this -";
}
</style>
</head>

<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>

<b>Note:</b> For the content property to work in IE8, a DOCTYPE must be declared.

</body>
</html>

Upvotes: 0

Related Questions