Exciting CSS3 animation when hovering over Icon Font and Text

Why is the CSS3 Transition not working on the hover effect for both the text and the coffee cup, and why is there a white border at the bottom of the coffee cup? I am looking to remove the border at the bottom of the cup.

The entire thing utilizes the Awesome Icon Font.

Check out the 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>

css

Answer №1

Here is a suggestion to achieve the desired effect: http://jsfiddle.net/inkedraskal/5g95efau/

You can set one of the elements to have an absolute position and use "opacity" for transitioning between the two elements 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;
}

Answer №2

Animating the display property is not possible. The white border seen is actually the default text underline that browsers automatically apply to anchor tags.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Image with a curvilinear embedded link

Can a round image be created with an alpha channel where a hyperlink surrounding it only recognizes the visible part of the image, excluding the transparent areas? If not possible, are there alternative methods to achieve this effect? ...

htmlcss

The card header in Bootstrap card grid does not have the ability to extend all the way to the edge of

Utilizing bootstrap 4 within Laravel, I create blade.php template files. Here is a snippet of my code. The card grid layout appears satisfactory, however, there seems to be some empty space between the card titles and the edges of the cards. <div id=" ...

htmlcsslaravelbootstrap-4bootstrap-cards

Switch up the hover color of the dropdown menu in the Bootstrap navbar

I'm struggling to change the hover color of the dropdown menu in the navigation bar. Can anyone please help me with this? Here is my HTML code. How can I change the hover color using CSS? <div class="navbar navbar-inverse" id="menu"> <di ...

htmlcsstwitter-bootstrap

Dynamic sidebar that adheres to the content and is placed alongside it using JavaScript

I am in need of creating a sticky sidebar that will float beside my content column. The purpose of this sidebar is to contain jump links on the page, similar to what can be seen on this page, but with the navigation buttons positioned directly next to the ...

javascriptjquerycss

Arranging the final item in the empty space above the div section using Flexbox

Kindly review this code for additional details. Take a look at the image above for a clearer understanding. On the right side of the image, you will notice that the last row contains two items and the second row has one empty slot. I need to rearrange one ...

cssflexbox

Solving the problem of endless looping in JavaScript tree structures

i have been trying to create a tree structure in JavaScript. However, when I use the add_child function to add a child to an item in the elements array, it adds the child to all items in the elements array and their children, creating an infinite loop. I ...

javascripthtmlcss

Unable to activate hover effect on a div element

To check out the website, click here (then navigate to the "portfolio" section). I've been attempting to create a title that appears when an image is hovered over. I've formatted both the images and text to display upon hovering. I set the visib ...

csshtmlhover

Avoiding the text being emphasized when hovering over the navigation bar list

Whenever I hover over the text in the navigation bar, the space above the text is highlighted instead of the text itself. This issue could be related to my CSS code: ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: silver ...

htmlcss

Completely alter the appearance of an <img> element using CSS without modifying the src attribute

Hey there! I currently have an image in the img src="image" tag. Is there a method within CSS to completely replace that image? I am unable to modify the JavaScript or HTML. I attempted using background-image, but the original image is still b ...

css

If the parent class in HTML has a class of "active," then use jQuery to

I have attempted this, but unfortunately did not achieve the desired result. I am just brainstorming my ideas here. HTML <html> <div> <div class="spinner"> </div> </div> </html> Jquery if (".spinner"){ th ...

javascriptjqueryhtmlcss

What is the best way to position HTML grandchildren using CSS Grid Lines?

I am looking to use CSS grid to create a section divided into 3 areas: header (yellow), body (red), and controls (blue). Each area will have its own div as the grid item, with children elements within these divs. https://i.sstatic.net/A367O.png Is it pos ...

htmlcsscss-grid

Create a transparent selection form using Contact Form 7

I'm having trouble making the Options in a Select Drop Down transparent, but it just doesn't seem to work. Even when I try to make it black, it stays black. .wpcf7-select option { background: black !important; } No matter how many times I ...

htmlwordpresscsscontact-form-7

Error Type Not Caught on Console

Could you please help me understand the error message below? I'm not very familiar with JavaScript. Uncaught TypeError: $(...).sss is not a function at HTMLDocument.<anonymous> (codejs.js:3) at i (jquery.min.js:2) at Object.fireWith [as resolve ...

javascripthtmlcsswebslider

Embed a webpage into a PowerPoint presentation

This question may be unconventional, but I am in search of a PowerPoint add-in that allows me to insert webpages for free. I have previously used LiveWeb, however, the browser does not support CSS3 and HTML5, so I need one that does. Can you suggest any a ...

htmlcsspowerpoint

What is the best method to style a child input element's placeholder using Tailwind CSS?

I'm currently working on a project and trying to translate a CSS style that targets the ::placeholder pseudo-element into Tailwind CSS. However, I have encountered some challenges during this process as I'm not entirely sure of the correct approa ...

csstailwind-css

Is there a way to achieve a marker-style strike through on text?

I'm attempting to create a strikethrough effect for a marker, just like the one shown in the image below. https://i.sstatic.net/2FQkD.png In my efforts to achieve this effect, I have tried wrapping the text within two span elements. The inner span ...

htmlcss

The CSS Grid container fails to resize based on the content inside

I am facing an issue with the grid element inside a parent container with display: grid;. The parent container has a maximum size and allows scrolling for the grid if necessary. The problem is that the grid element does not expand to fit its children. Whe ...

csscss-grid

Master the Art of Scrollbar Control in Angular!

I am currently developing a chat web application that functions similar to gchat. One of the key features I'm trying to implement is an alert notification when the scrollbar is in the middle of the div, indicating a new message. If the scrollbar is at ...

javascriptjqueryhtmlcssangularjs

Press the "show additional content" button on the nytimes.com website using selenium

I'm experiencing difficulty scrolling through this webpage. Once I reach the bottom of the page, I am unable to locate and click on the "SHOW MORE" button using selenium. self.driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") ...

pythoncssseleniumselenium-webdriverweb-scraping

Unable to decrease the height of the textbox

Need help adjusting the height of a bootstrap textbox. <div class="form-group row"> <label class="col-xl-3">Posted Speed Limit (mph)</label><input type="text" class="col-xl-1 ps" autocomplete="off" id="sl" onkeydown="return key ...

htmlcssdjangobootstrap-4