CODEWITHSUNDEEP
css
user4466220
user4466220

Reputation:

CSS3 transition within Awesome Icon Font and Text Hover

Why doesn't work the CSS3 Transition on the hover effect within the text and the coffee cup and why is at the bottom of the coffee cup a white border? I want to remove the border at the bottom of the cup.

I used the Awesome Icon Font within the whole thing.

Here's a DEMO. Here's my code:

body {
    background: #000;
}

.contactbutton {
    border: 1px solid #FFF;
    height: 50px;
    margin-top: 50px;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    font-size: 20px;
    background: transparent;
}

.contactbutton a,
.contactbutton a:link,
.contentbutton a:visited {
    color: #FFF;
}

.contactbutton i {
    display: none;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.contactbutton a b {
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.contactbutton a:hover i {
    display: block;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.contactbutton a:hover b {
    display: none;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="contactbutton"><a href="#contact"><i class="fa fa-coffee fa-2x"></i></i><b>Talk.</b></a></div>

Upvotes: 0

Views: 1334

Answers (2)

RMH
RMH

Reputation: 831

Try this: http://jsfiddle.net/inkedraskal/5g95efau/

Instead position one of the elements absolute and use "opacity" to transition between the 2 on hover

body {
    background: #000;
}

.contactbutton {
    border: 1px solid #FFF;
    height: 50px;
    margin-top: 50px;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    font-size: 20px;
    background: transparent;
    position: relative;
}

.contactbutton a,
.contactbutton a:link,
.contentbutton a:visited {
    color: #FFF;
}

.contactbutton i {
    opacity: 0;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.contactbutton a b {
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
      position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 25px;
  margin: auto;
}

.contactbutton a:hover i {
    opacity: 1;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.contactbutton a:hover b {
    opacity: 0;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

Upvotes: 2

inorganik
inorganik

Reputation: 25525

You can't animate the display property. The white border is the default text underline that is applied by browsers to anchor tags.

Upvotes: 0

Related Questions